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

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。

我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?


当前回答

高度:< % >将只工作,如果你所有的父节点都具有指定的百分比高度和固定的高度(像素,ems等)在顶层。这样,高度就会随你的喜好而下降。

您可以像前面提到的@Travis那样为html和body元素指定100%,以使页面高度向下级联到节点。

其他回答

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

margin-bottom: 100%;

我发现,设置两列显示:table-cell;代替float: left;工作得很好。

这个答案是不理想的,因为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>

注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法,请参见:https://stackoverflow.com/a/23300532/1155721


我建议你看看跨浏览器CSS的等高列,没有黑客。

基本上,以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单),所以请找到一个适当的预打包解决方案。

同样,答案也取决于你想要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

状态引导,但你不需要引导来使用这个。回答这个老问题,因为这对我来说很管用,而且似乎很容易实现。

这和我对这个问题的回答是一样的