我找到了一种方法,通过设置使div容器占据页面的至少全高min-height: 100%;.但是,当我添加嵌套的div和set时height: 100%;,它不会延伸到容器的高度.有办法解决吗？
html, body {
height: 100%;
margin: 0;
}
#containment {
min-height: 100%;
background: pink;
}
#containment-shadow-left {
height: 100%;
background: aqua;
}<div id="containment">
<div id="containment-shadow-left">
Hello World!
</div>
</div>Kus*_*our 158
添加height: 1px到父容器.适用于Chrome,FF,Safari.
ptr*_*iek 132
这是一个报告的webkit(chrome/safari)错误,具有最小高度的父级的子级无法继承高度属性:https://bugs.webkit.org/show_bug.cgi？id = 26559
显然Firefox也受到影响(目前无法在IE中测试)
可能的解决方法:
当内部元素具有绝对定位时,该错误不会显示.
编辑于2014年4月10日
由于我目前正在开发一个项目,我真的需要父容器min-height,而子元素继承容器的高度,我做了一些更多的研究.
首先:我不再确定当前的浏览器行为是否真的是一个错误.CSS2.1规范说:
百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".
如果我在容器上放置一个最小高度,我没有明确指定它的高度 - 所以我的元素应该达到一个auto高度.这正是Webkit和所有其他浏览器所做的.
其次,我找到了解决方法:
如果我将我的容器元素设置为display:table,height:inherit它的行为方式与我给它min-height的100%相同.并且 - 更重要的是 - 如果我将子元素设置为display:table-cell它将完美地继承容器元素的高度 - 无论是100%还是更高.
完整的CSS:
html, body {
height: 100%;
margin: 0;
}
#container {
background: green;
display: table;
height: inherit;
width: 100%;
}
#content {
background: red;
display: table-cell;
}
标记:
<div id="container">
<div id="content">
<p>content</p>
</div>
</div>
见http://jsfiddle.net/xrebB/54/.
Kev*_*ton 84
以为我会分享这个,因为我没有在任何地方看到这一点,而且是我用来修复我的解决方案.
解决方案:min-height: inherit;
我有一个指定最小高度的父母,我需要一个孩子也是那个高度.
.parent {
min-height: 300px;
background-color: rgba(255,255,0,0.5); //yellow
}
.child {
min-height: inherit;
background-color: rgba(0,255,0,0.5); //blue
}
p {
padding: 20px;
color: red;
font-family: sans-serif;
font-weight: bold;
text-align: center;
}<div class="parent">
<div class="child">
<p>Yellow + Blue = Green :)</p>
</div>
</div>这样,孩子现在充当最小高度的100%的高度.
我希望有些人觉得这很有用:)
这是@jackocnr在评论中添加的，但我错过了。对于现代浏览器，我认为这是最好的方法。
如果太小，它将使内部元素填充整个容器，但如果太大，则将扩展容器的高度。
#containment {
min-height: 100%;
display: flex;
flex-direction: column;
}
#containment-shadow-left {
flex: 1;
}
除了现有的答案外，还vh可以使用视口单位。下面的简单片段。当然它也可以和 with 一起使用calc()，例如min-height: calc(100vh - 200px);当页眉和页脚200px一起有高度时。
body {
margin: 0;
}
.child {
min-height: 100vh;
background: pink;
}<div class="parent">
<div class="child"></div>
</div>尽管display: flex;已在此处提出建议display: grid;，但现在考虑使用它，因为它已得到广泛支持。默认情况下，网格的唯一子项将完全填充其父项。
html, body {
height: 100%;
margin: 0;
padding: 0; /* Don't forget Safari */
}
#containment {
display: grid;
min-height: 100%;
background: pink;
}
#containment-shadow-left {
background: aqua;
}这通常对我有用：
.parent {
min-height: 100px;
background-color: green;
display: flex;
}
.child {
height: inherit;
width: 100%;
background-color: red;
}<!DOCTYPE html>
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>我不认为这是浏览器的错误。所有行为都以相同的方式 - 也就是说，一旦停止指定显式高度，最小高度基本上是“最后一步”。
这似乎正是 CSS 2.1 规范建议的方式： http://www.w3.org/TR/CSS2/visudet.html#the-height-property
百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素未绝对定位，则该值计算为“auto”。
因此，由于min-height父级没有显式height设置属性，因此默认为 auto。
display: table-cell如果您的目标受众的浏览器可以的话，可以通过使用 或较新的样式（例如 flexbox）来解决此问题。在某些情况下，您还可以通过在绝对定位的内部元素上使用top和属性来颠覆这一点，这会为您提供 100% 的高度，而无需指定。bottom