我找到了一种方法，使一个div容器占据至少一个页面的全部高度，通过设置最小高度:100%;。然而，当我添加一个嵌套的div并设置高度:100%;，它不会延伸到容器的高度。有办法解决吗?
Html, body { 高度:100%; 保证金:0; ｝ #控制{ 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 高度:100%; 背景:水; ｝ < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >
当前回答
除了现有的答案，还有视口单元vh可以使用。下面是一个简单的代码片段。当然，它也可以与calc()一起使用，例如min-height: calc(100vh - 200px);当页眉和页脚的高度在一起是200px时。
身体{ 保证金:0; ｝ .child { 最小高度:100 vh; 背景:粉色; ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >
其他回答
虽然显示:伸缩;这里已经建议，考虑使用显示:网格;现在它得到了广泛支持。默认情况下，网格的唯一子节点将完全填充其父节点。
Html, body { 高度:100%; 保证金:0; 填充:0;/*不要忘记Safari */ ｝ #控制{ 显示:网格; 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 背景:水; ｝
添加这个到父组件为我修复了它:
display: flex;
flex-direction: column;
这对我来说是适用的，基于百分比的身高和父母仍然根据孩子的身高增长。 在Firefox, Chrome和Safari中工作良好。
.parent { 位置:相对; 最小高度:100%; ｝ .child { 最小高度:100 vh; ｝ < div class = "父" > < div class = "孩子" > < / 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 >
