Question

我试图通过使用高度100％将div扩展到px的最大高度。它似乎不想工作..

HTML

<div class="container">
    <h2>Dynamically populated using PHP</h2>
    <p>Dynamically populated using PHP</p>
</div>

CSS

.container {max-height:500px; height:100%;}

Answer 1

max-height会将DIV的高度限制为500px，但如果它不占用500px则允许它更小。

height: 100%将从父元素的高度继承高度。

如果您希望DIV的高度为500px，请使用height: 500px。

我已经包含了一个例子。对于.outer和.inner DIV，取消注释或注释高度值。您将看到，如果未设置父DIV的高度，则height: 100%将与父级的高度不匹配，并且默认为它自己内容的高度。

.outer {
    background-color: blue;
    height: 100px;
}
.inner {
    background-color: red;
    color: white;        
    /*height: 100%;*/
    text-align: center;
    width: 50%;    
}

<div class="outer">
    <div class="inner">
        Inner
    </div>
</div>

Answer 2

除非父元素具有已定义的高度，否则元素的高度将不会遵循百分比高度。此规则的唯一例外是<html>标记和<body>标记。他们可以有百分比的高度。您可以使用此异常来获得所需的输出。

我是在this JSFiddle中完成的。

希望这有帮助！

将div扩展为高度100％的最大高度

2 个答案:

我是在this JSFiddle中完成的。