Question

我想要一个高度的子元素：100％;容器应用高度：100％;当存在doctype时，这似乎失败了。

如果你使用min-height：100％;对于父母，子元素不适用身高：100％;

如果你使用身高：100％;子元素被拉伸，但会溢出父元素。如果你然后尝试使用高度：100％;在父母和保持最小高度：100％;对孩子们来说，孩子们已经不再适应了。

这是一个小样本：

<!DOCTYPE html>
<html>
<head>
<title>Oh Well</title>
<style>
html, body {
    width: 100%;
    height:100%;
    background: white;
    margin:0;
    padding:0;
}

#min-h-100 {
    background-color: #eee;
    min-height: 100%;
}
#min-h-100 > div{
    min-height: 100%;
}

#h-100 {
    background-color: #ccc;
    height: 100%;
}
#h-100 > div {
    height: 100%;
}
</style>
</head>
<body>
<div id="min-h-100">
   <div>If this is heigher than the container, the container expands.</div>
   <div>The child elements do not get 100% height.</div>
</div>
<div id="h-100">
    <div>The child elements get 100% height.</div>
    <div>But there will be an overflow.</div>
</div>
<div>THIS SHOULD BE PUSHED DOWN</div>
</body>
</html>

修改的 min-height不会继承。 @GCryrillus提出了将display：table应用于父级的想法，这至少会延伸父级。 @Volker E.创建了一个codepen。

修改的如果你不想支持IE≤8，你可以设置孩子最小身高：100vh;这将使它至少与视口一样高。

Answer 1

我觉得这个问题很有意思，特别是＃{1}}案例＃2意味着父母id="h-100"上有几个height: 100%个孩子。

我想出了Codepen including the different options。为防止第二种情况出现溢出，您还可以使用height: 100%，但这会导致信息丢失。

@GCyrillus说得对，使用overflow: hidden和display: table;符合孩子display: table-row/table-cell;。

div

#h-100-table { background-color: #ddd; display: table; width: 100%; height: 100%; } #h-100-table > div { display: table-row; width: 100%; } #h-100-table > div > div { // you don't need to go for extra nesting, but it's clearer. display: table-cell; width: 100%; }的曾孙不是必不可少的，而是可维护性的更多。你也可以和#h-100-table个孩子一起去。

Answer 2

如果你不想支持IE≤8，你可以设置孩子最小身高：100vh;这将使它至少与视口一样高（所以基本上给你想要的效果）。（seen here）

最小身高的孩子：100％不适用身高：100％

2 个答案: