我有一个网站与以下结构:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。
我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?
我有一个网站与以下结构:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。
我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?
当前回答
你可以把display: flex到div#主,align-self: stretch到div#导航。
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
// CSS file
#main {
display: flex;
}
#navigation {
align-self: stretch;
}
其他回答
要做到这一点,最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道,比如Dan Cederholm 2004年的一篇文章。
我通常是这样做的:
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
<div id="navigation" style="float:left;width:190px;padding-right:10px;">
<!-- Navigation -->
</div>
<div id="content" style="float:left;width:750px;">
<!-- Content -->
</div>
</div>
您可以通过将#container包装在另一个div中,将标题div嵌入为#container的兄弟,并将边缘和宽度样式移动到父容器中,轻松地在此设计中添加标题。此外,CSS应该移动到一个单独的文件,而不是保持内联等等。最后,clearfix类可以在positioniseverything上找到。
给予位置:绝对;对我的孩子有效
这个答案是不理想的,因为CSS flexbox和网格实现到CSS。然而,这仍然是一个可行的解决方案
在一个较小的屏幕上,你可能希望保持高度自动,因为col1, col2和col3是相互堆叠的。
然而,在媒体查询断点之后,您希望所有列的cols都以相同的高度紧挨着出现。
1125 px只是窗口宽度断点的一个例子,在此之后,您将希望将所有列设置为相同的高度。
<div class="wraper">
<div class="col1">Lorem ipsum dolor sit amet.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>
当然,如果需要,还可以设置更多的断点。
<script>
$(document).ready(function(){
$(window).on('load resize', function() {
let vraperH = $('.wraper').height();
if (window.innerWidth>= 1125) {
$('.col1').height(vraperH);
$('.col2').height(vraperH);
$('.col3').height(vraperH);
}
if (window.innerWidth < 1125) {
$('.col1').height('auto');
$('.col2').height('auto');
$('.col3').height('auto');
}
});
});
</script>
这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。
html,body {
height:100%;
}
这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧,但这是最简单的方法。
你使用CSS Flexbox
.flex-container { display: flex; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } <!DOCTYPE html> <html> <head> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> <p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p> <p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p> </body> </html>