css - 强制嵌套 div 的最小高度为 100%?

标签 css layout position height

我知道 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%; }

http://jsfiddle.net/4PsdT/

这样,您就告诉浏览器将顶部 (HTML) 的所有外部元素设置为 100% 的高度。这将使这些元素延伸到浏览器的高度。然后只需将 min-height 添加到包含内容的最内层元素即可。

设置一个高度并不意味着它的 child 过多的内容会掉出来,除非你添加overflow:hidden;

关于css - 强制嵌套 div 的最小高度为 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11916531/

相关文章:

html - 按住 css 中的输入按钮时如何删除蓝色突出显示?

google-chrome - css3-webkit-transform-style : preserve-3d and relative/absolute elements flickering

css - 完全隐藏不完全适合其父级可见部分的 block 元素

html - 左侧元素的固定边距

html - 不占用空间的粘性元素(如相对/绝对元素)- CSS

c# - 如何获取标签的位置?

html - 绝对和相对

css - 使站点主区域和小部件区域位于页面中央

layout - 绝对定位在 chrome 中的显示表格元素内时的 1px 间隙

java - 在java JPanel中对齐文本