目前实现这一目标的最佳方法是使用display: flex;。然而，当你试图支持IE11时，你可能会遇到一个问题。根据https://caniuse.com使用flexbox:

当使用min-height时，IE 11不能正确地垂直对齐项目

Internet Explorer兼容解决方案

解决方案是使用display: table;在父元素和显示元素上:table-row;对孩子双方身高:100%;作为min-height的替换:100%;

这里列出的大多数解决方案使用display: table, table-row和/或table-cell，但它们不会复制与min-height: 100%;相同的行为，即:

继承父类的计算高度(而不是继承它的height属性); 允许父节点的高度超过其min-height;

当使用这个解决方案时，行为是相同的，属性min-height是不需要的，这允许绕过bug。

解释

它工作的原因是，与大多数元素不同，使用display: table和table-row的元素将始终与它们的内容一样高。这使得它们的height属性的行为类似于min-height。

实际解决方案

html, body { height: 100px; margin: 0; } #containment { display: table; height: 100%; background: pink; width: 100%; } #containment-shadow-left { display: table-row; height: 100%; background: aqua; } #content { padding: 15px; } #demo { display: none; background-color: red; height: 200px; } #demo-checkbox:checked ~ #demo { display: block; } <div id="containment"> <div id="containment-shadow-left"> <div id="content"> <input id="demo-checkbox" type="checkbox"> <label for="demo-checkbox">Click here for overflow demo</label> <div id="demo">This is taller than #containment</div> </div> </div> </div>

这对我来说是适用的，基于百分比的身高和父母仍然根据孩子的身高增长。 在Firefox, Chrome和Safari中工作良好。

.parent { 位置:相对; 最小高度:100%; ｝ .child { 最小高度:100 vh; ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >

为父容器添加高度:1px。工作在Chrome, FF, Safari。

因为谷歌员工:

这个jquery解决方案使#containment自动获取高度(by, height: auto)，然后获取实际高度作为像素值分配。

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

只是为了保持这个主题的完整，我发现了一个解决方案没有探索这里使用固定位置。

没有溢出

Html, body， .wrapper， .parent， .child { 位置:固定; 上图:0; 底部:0; 左:0; 右:0; 保证金:0; 填充:0; 高度:100%; ｝ .child { 溢出:汽车; 背景:灰色; } .height-50 { 高度:50%; 宽度:5 em; Margin: 10px auto; 背景:青色; ｝ < div class = "包装" > < div class = "父" > < div class = "孩子" > < div class = " height-50 " > < / div > < / div > < / div > < / div >

与溢出

Html, body， .wrapper， .parent， .child { 位置:固定; 上图:0; 底部:0; 左:0; 右:0; 保证金:0; 填充:0; 高度:100%; ｝ .child { 溢出:汽车; 背景:灰色; ｝ .height - 150 { 高度:150%; 宽度:5 em; Margin: 10px auto; 背景:青色; ｝ < div class = "包装" > < div class = "父" > < div class = "孩子" > < div class = "身高- 150 " > < / div > < / div > < / div > < / div >

添加这个到父组件为我修复了它:

display: flex;
flex-direction: column;