我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法,请参见:https://stackoverflow.com/a/23300532/1155721
我建议你看看跨浏览器CSS的等高列,没有黑客。
基本上,以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单),所以请找到一个适当的预打包解决方案。
同样,答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高,答案就略有不同。
其他回答
试着让最低利润率达到100%。
margin-bottom: 100%;
使用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();
});
如前所述,flexbox是最简单的。 如。
#main{ display: flex; align-items:center;}
这将使所有子元素对齐到父元素的中心。
这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。
html,body {
height:100%;
}
这段看似毫无意义的代码是为了向浏览器定义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
状态引导,但你不需要引导来使用这个。回答这个老问题,因为这对我来说很管用,而且似乎很容易实现。
这和我对这个问题的回答是一样的