我找到了一种方法，使一个div容器占据至少一个页面的全部高度，通过设置最小高度:100%;。然而，当我添加一个嵌套的div并设置高度:100%;，它不会延伸到容器的高度。有办法解决吗?
Html, body { 高度:100%; 保证金:0; ｝ #控制{ 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 高度:100%; 背景:水; ｝ < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >
当前回答
已经有一段时间了，但是，如果其他人还在挣扎，我找到了我的变通办法。 我需要的父母有一个最小的高度，和孩子(这将包含几个图像/文件预览)必须占据整个父母，所以..
我简单地定义了一个最小的高度给孩子，让父母没有定义高度，所以它可以随着孩子的内容增长。
CSS
.parent{
border: 1px solid black;
border-radius: 5px;
}
.children{
width: 100%;
min-height: 100px;
}
HTML:
<div class="parent">
<div class="children">
some content inside
</div>
</div>
其他回答
只是为了保持这个主题的完整，我发现了一个解决方案没有探索这里使用固定位置。
没有溢出
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 >
2022年7月6日
.parent { 显示:flex;/*非常重要的规则*/ flex-direction:列;/*非常重要的规则*/ 最小高度:100% ｝ .child { 高度:100%; flex-grow: 1;/*非常重要的规则，模拟flex: 1;* / ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >
已经有一段时间了，但是，如果其他人还在挣扎，我找到了我的变通办法。 我需要的父母有一个最小的高度，和孩子(这将包含几个图像/文件预览)必须占据整个父母，所以..
我简单地定义了一个最小的高度给孩子，让父母没有定义高度，所以它可以随着孩子的内容增长。
CSS
.parent{
border: 1px solid black;
border-radius: 5px;
}
.children{
width: 100%;
min-height: 100px;
}
HTML:
<div class="parent">
<div class="children">
some content inside
</div>
</div>
添加这个到父组件为我修复了它:
display: flex;
flex-direction: column;
我不相信这是浏览器的bug。所有的行为都是一样的——也就是说，一旦停止指定显式高度，min-height基本上就是“最后一步”了。
这似乎正是CSS 2.1规范所建议的: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
该百分比是根据生成的框的包含块的高度计算的。如果包含块的高度没有明确指定(即，它取决于内容高度)，并且该元素不是绝对定位，则该值计算为'auto'。
因此，由于min-height父类没有显式的height属性设置，它默认为auto。
有一些方法可以通过使用display: table-cell或新的样式(如flexbox)来解决这个问题，如果这对您的目标用户的浏览器可行的话。在某些情况下，您还可以通过在绝对定位的内部元素上使用top和bottom属性来改变这种情况，这将为您提供100%的高度而无需指定。
