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

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

尽管这个解决方案是用jQuery完成的，但我认为它可能对任何人来说都是有用的，因为任何人都可以根据屏幕大小制作列。

对于从页面顶部开始的列，此解决方案是最简单的。

body, html {
  height: 100%;
}

div#right {
  height: 100%
}

对于不从页面顶部开始的列（例如：如果它们从页眉下方开始）。

<script>
     $(document).ready(function () {
         var column_height = $("body").height();
         column_height = column_height - 100; // 100 is the header height
         column_height = column_height + "px";
         $("#column").css("height",column_height);
    });
</script>

第一种方法将主体高度应用于它和列，这意味着starting_pixels+height100%。

第二种方法通过获取正文的高度来获取显示给用户的页面高度，然后减去页眉大小，以了解显示该列的剩余高度。

尝试一下。。。

* {填充：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'});
    }
});

.包装器{显示：-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>

此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。

您只需设置高度：100%。

html，正文{高度：100%；边距：0；}.内容{高度：100%；最小高度：100%；位置：相对；}.剩余内容{高度：自动；最小高度：100%；浮动：左侧；背景：#ddd；宽度：50%；位置：相对；}#一个{背景：url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa；宽度：50%；位置：相对；浮动：左侧；}#两个{背景：url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24；宽度：50%；浮动：左侧；位置：相对；overflow-y：滚动；}<div class='content'id='one'></div><div class='content-left'id='wo'></div>