这是一个高度修正。

在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'});
    }
});

尽管这个解决方案是用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%。

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

您可以使用显示器：flex和高度：100vh

html，正文{高度：100%；边距：0px；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

尝试此操作-已测试：

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

在以后的版本中，您可以使用vh：

#right, #left {
  height: 100vh
}

尝试一下。。。

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

使用FlexBox CSS

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