我知道 min-height: 100%
仅在父元素具有某个高度数值的情况下才能至少占据其父元素高度的 100%,但是如果我有一些嵌套的 div,我希望它们的最小高度都为 100%?我尝试了 min-height:inherit
但这也不起作用?我知道我可以通过简单地检查文档加载时的浏览器高度值然后将其分配给我嵌套 div 的 min-height 属性来用 JavaScript 解决这个问题,但我想知道是否有可能解决这个问题只用 CSS?
编辑:我还应该提到,我需要最外层的 div 和嵌套的 div 都具有 100% 的最小高度,以便它们至少占据浏览器的高度,但在需要时进行扩展。
最佳答案
min-height: inherit;
应该有效:http://jsfiddle.net/ugxbs/
编辑
至于百分比值和预期行为,nested min-height 背后没有任何逻辑。您应该做的是为所有父级使用 height
属性,然后将 min-height 添加到最里面的 DIV
。
F.例如:
<html>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS:
html, body, .outer { height: 100% }
.inner { min-height: 100%; }
这样,您就告诉浏览器将顶部 (HTML
) 的所有外部元素设置为 100% 的高度。这将使这些元素延伸到浏览器的高度。然后只需将 min-height
添加到包含内容的最内层元素即可。
设置一个高度
并不意味着它的 child 过多的内容会掉出来,除非你添加overflow:hidden;
。
关于css - 强制嵌套 div 的最小高度为 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11916531/