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

我想要一个身高的孩子元素：100％;容器适用高度：100％;.当出现文档类型时，这似乎失败了。最小高度的孩子：100％不适用身高：100％

如果您使用最小高度：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>

编辑： 最小高度不继承。 @Cryrillus提出了将display：table应用到父项的想法，该项至少延伸了父项。 @Volker E.创建了一个codepen。

编辑： 如果你不想支持IE≤8，您可以设置孩子最小高度：100vh;这将使其至少与视口一样高。

来源

2014-03-30 aimed

最小高度不能通过最小高度而不受任何其他规则无法估计。 A **规则仅继承父母 –

@Gyryrillus中的类似规则**，这就是为什么min-height不起作用，谢谢:)。有没有办法来防止溢出，或者更确切地说，在使用height时拉伸父项：100％;？ – aimed

你可以尝试给所有孩子发送'height：100％'并使用'display：table'，所以它可以让它们伸展，你也需要设置'width'然后 –

我觉得这个问题很有趣，特别是情况＃2与id="h-100"意味着几个height: 100%孩子height: 100%父母。我想出了Codepen including the different options。为防止第二种情况发生溢出，您也可以使用overflow: hidden，但这会造成信息丢失。

@GCyrillus说得对，请使用display: table;和display: table-row/table-cell;符合儿童div s。

#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的盛大孩子不是必需的，它更可维护性。你也可以只与table-row孩子一起去。

来源

2014-03-30 19:10:57

@GCyrillus与您的方法父母拉伸，但第二个孩子似乎只显示非空白区域。 – aimed

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

来源

2014-03-30 19:58:05 aimed

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

回答

相关问题