我找到了一种方法，使一个div容器占据至少一个页面的全部高度，通过设置最小高度:100%;。然而，当我添加一个嵌套的div并设置高度:100%;，它不会延伸到容器的高度。有办法解决吗?
Html, body { 高度:100%; 保证金:0; ｝ #控制{ 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 高度:100%; 背景:水; ｝ < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >
当前回答
在尝试了我们的之后!chrome理解，当我设置显示值为inline block时，我希望子元素的高度为100%。顺便说一句，设置浮动会导致它。
display:inline-block
更新
这行不通。解决方案是获得parentnode offsetheight，并使用它在页面的和javascript。
<script>
SomedivElement = document.getElementById('mydiv');
SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';
</script>
其他回答
因为谷歌员工:
这个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>
我想我会分享这个，因为我在任何地方都没有看到这个，这是我用来修复我的解决方案。
解决方案:min-height:继承;
我有一个父结点有一个指定的最小高度，我需要一个子结点也有这个高度。
.parent { 最小高度:300 px; background - color: rgba(255255年,0,0.5);/ /黄色 ｝ .child { 最小高度:继承; background - color: rgba(0255年,0,0.5);/ /蓝色 ｝ p { 填充:20 px; 颜色:红色; 字体类型:无衬线; 粗细:大胆的; text-align:中心; ｝ < div class = "父" > < div class = "孩子" > <p>黄色+蓝色=绿色:)</p> < / div > < / div >
这样，子节点现在就相当于最小高度的100%。
我希望有些人会觉得这有用:)
为父容器添加高度:1px。工作在Chrome, FF, Safari。
目前实现这一目标的最佳方法是使用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>
添加这个到父组件为我修复了它:
display: flex;
flex-direction: column;
