我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。

我尝试过高度:100%,最小高度:100%;,等


当前回答

以下内容与您之前的回答不完全相同,但可能对某些人有所帮助:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

其他回答

最简单的方法就是这样做。

第二部分{背景:红色;高度:100vh;}正文{边距:0px;}<div></div>

这是一个高度修正。

在CSS中使用:

#your-object: height: 100vh;

对于不支持vh单元的浏览器,请使用modernizr。

添加此脚本(为vh单元添加检测)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

最后,如果浏览器不支持vh单位,请使用此函数将视口的高度添加到#your object:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

如果将html和body_height设置为100%,它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%,那么它将覆盖整个窗口,如下所示:

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时,这才有效,因为百分比总是从直接父级继承的,通过执行上面的CSS代码,您告诉div从直接父(body)继承100%的高度,并使其成为您的最小高度:100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}

您可以使用以下CSS使div达到浏览器窗口高度的100%:

display: block;
position: relative;
bottom: 0;
height: 100%;

使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名,但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中,并选择要展开的部分。它们将自动占用容器中的所有可用空间。