DIVs {height：100％; }继承祖父的高度和父亲的身高 [英] DIVs {height: 100%; } inheriting grandparent's height and overflowing parent's height
本文介绍了DIVs {height：100％; }继承祖父的高度和父亲的身高的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在尝试设置 {height：100％;}时遇到了：计算的高度不等于父 div.images } div＃placeholder 的高度，但祖父项 div＃ 。
I am encountering some problems with div.images when trying to set {height: 100%; }: computed height does not equal the parent div#placeholder's height, but the grandparent div#home-screen's.
<!DOCTYPE html>
<html>
<body>
<div id="page-wrapper">
<div id="home-screen">
<header>
<div></div>
</header>
<div id="placeholder">
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
</div>
<div id="cross-screen-content">
<div></div>
</div>
</div>
<main role="main">
<p>This is a test page. </p>
</main>
<footer>
<div></div>
</footer>
</div>
</body>
</html>
页面样式如下：
* {
margin: 0;
border: 0;
padding: 0; }
html, body {
height: 100%; }
div#page-wrapper {
height: 100%; }
div#home-screen {
display: table;
margin-bottom: 25px;
width: 100%;
height: 100%; }
header,
div#placeholder,
div#cross-screen-content {
display: table-row; }
header {
height: 85px;
background-color: #f00; }
div#placeholder {
height: 100%;
background-color: #0f0; }
div#placeholder div.images {
position: absolute;
left: 5%;
margin: 5px 0;
width: 90%;
height: 100%;
min-height: 200px;
background-color: #ccc; }
div#cross-screen-content {
height: 50px;
background-color: #00f; }
footer {
height: 80px; }
此外， {min-height：200px; } 似乎不工作。
有什么想法吗？
提前谢谢。
Any ideas? Thank you in advance.
UPDATE 1： min-height不起作用，但不会阻止父DIV折叠
UPDATE 1: min-height does work, but it does not prevent the parent DIV from collapsing.
推荐答案
代码应改写为：
<div id="placeholder">
<div id="wrapper">
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
</div>
</div>
div＃wrapper 需要下列样式：
div#wrapper {
display: table-cell;
position: relative; }
这篇关于DIVs {height：100％; }继承祖父的高度和父亲的身高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
