我有一个网站与以下结构:

<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%高,答案就略有不同。

使用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();
});

给予位置:绝对;对我的孩子有效

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

看看这个例子。

试着让最低利润率达到100%。

margin-bottom: 100%;