13

我知道min-height: 100%如果父元素有一些高度的数值，那只会占用其父元素高度的至少 100%，但是如果我有一些嵌套的 div 并且我希望它们都有一个最小高度怎么办100%？我试过min-height:inherit了，但也没有用？我知道我可以通过简单地检查文档加载时的浏览器高度值然后将其分配给嵌套 div 的 min-height 属性来使用 JavaScript 解决这个问题，但我想知道是否可以解决这个问题只有CSS？

编辑：我还应该提到，我需要最外层的 div 和嵌套的 div 都具有 100% 的最小高度，以便它们至少占据浏览器的高度，但如果需要可以扩展。

4

2 回答 2

22

min-height: inherit;应该工作：http: //jsfiddle.net/ugxbs/

编辑

至于百分比值和预期行为，嵌套最小高度背后没有逻辑。您应该做的是height为所有父母使用该属性，然后将 min-height 添加到 inner most DIV。

前：

<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% 的高度。这将使这些元素在浏览器高度上伸展。然后只需将 a 添加min-height到包含内容的最里面的元素。

设置 aheight并不意味着它的儿童内容过多会掉出来，除非你添加overflow:hidden;. ​</p>

于 2012-08-11T18:29:01.667 回答
0

我可以使它与属性高度一起工作，但不是最小高度。

http://jsfiddle.net/zDVqm/

于 2012-08-14T07:36:14.583 回答