我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
使用jQuery:
$(function() {
function unifyHeights() {
var maxHeight = 0;
$('#container').children('#navigation, #content').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$('#navigation, #content').css('height', maxHeight);
}
unifyHeights();
});
其他回答
给予位置:绝对;对我的孩子有效
对我有效的是添加 style={{display: 'flex', overflowY: "auto"}} 给所有孩子的父母,然后 style={{overflowY: "auto"}} 对孩子本身。
高度:< % >将只工作,如果你所有的父节点都具有指定的百分比高度和固定的高度(像素,ems等)在顶层。这样,高度就会随你的喜好而下降。
您可以像前面提到的@Travis那样为html和body元素指定100%,以使页面高度向下级联到节点。
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
来自:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
状态引导,但你不需要引导来使用这个。回答这个老问题,因为这对我来说很管用,而且似乎很容易实现。
这和我对这个问题的回答是一样的
我的解决方案:
$(window).resize(function() {
$('#div_to_occupy_the_rest').height(
$(window).height() - $('#div_to_occupy_the_rest').offset().top
);
});