我找到了一种方法,使一个div容器占据至少一个页面的全部高度,通过设置最小高度:100%;。然而,当我添加一个嵌套的div并设置高度:100%;,它不会延伸到容器的高度。有办法解决吗?

Html, body { 高度:100%; 保证金:0; } #控制{ 最小高度:100%; 背景:粉色; } # containment-shadow-left { 高度:100%; 背景:水; } < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >


当前回答

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

display: flex;
flex-direction: column;

其他回答

在尝试了我们的之后!chrome理解,当我设置显示值为inline block时,我希望子元素的高度为100%。顺便说一句,设置浮动会导致它。

display:inline-block

更新

这行不通。解决方案是获得parentnode offsetheight,并使用它在页面的和javascript。

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>

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

2022年7月6日

.parent { 显示:flex;/*非常重要的规则*/ flex-direction:列;/*非常重要的规则*/ 最小高度:100% } .child { 高度:100%; flex-grow: 1;/*非常重要的规则,模拟flex: 1;* / } < div class = "父" > < div class = "孩子" > < / div > < / div >

我不相信这是浏览器的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%的高度而无需指定。

除了现有的答案,还有视口单元vh可以使用。下面是一个简单的代码片段。当然,它也可以与calc()一起使用,例如min-height: calc(100vh - 200px);当页眉和页脚的高度在一起是200px时。

身体{ 保证金:0; } .child { 最小高度:100 vh; 背景:粉色; } < div class = "父" > < div class = "孩子" > < / div > < / div >