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

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

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


当前回答

如果你能绝对定位你的元素,

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

其他回答

尝试一下。。。

* {填充:0;边距:0;}.父目录{溢出:隐藏;清晰:两者都有;颜色:#FFF;文本对齐:居中;}.left_div{浮动:左侧;高度:100vh;宽度:50%;背景色:蓝色;}.右_右{浮动:右侧;高度:100vh;宽度:50%;背景色:绿色;}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</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'});
    }
});

你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

尝试在身体上使用“height:100%”。

.包装器{显示:-webkit框;显示:-ms flexbox;显示:柔性;-ms-flex-wrap:包裹;柔性包裹:包裹;高度:100vh;/*高度窗口(vh)*/}.包装器.左侧{宽度:80%;/*宽度可选,但建议使用*/}.包装器.右侧{宽度:20%;/*宽度可选,但建议使用*/背景色:#DD1F26;}<!--vw:视口宽度的百分之一。vh:视口高度的百分之一。vmin:视口宽度或高度中较小者的百分之一。vmax:视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>