我找到了一种方法,使一个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;

其他回答

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

display: flex;
flex-direction: column;

我想我会分享这个,因为我在任何地方都没有看到这个,这是我用来修复我的解决方案。

解决方案: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%。

我希望有些人会觉得这有用:)

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

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

没有溢出

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 >

Kushagra Gour的解决方案确实有效(至少在Chrome和IE中),并且无需使用display: table就解决了原来的问题;并显示:table-cell;。参见plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

设置min-height: 100%;身高:1 px;在外部div上,使其实际高度至少为100%。它还允许内部div正确继承高度。