DIV {高度：100％；继承祖父母的身高并溢出父母的身高

Question

I am encountering some problems with div.images when trying to set {height: 100%; } 尝试设置{height: 100%; }时，我在div.images遇到一些问题{height: 100%; } {height: 100%; } : computed height does not equal the parent div#placeholder 's height, but the grandparent div#home-screen 's. {height: 100%; } ：计算出的高度不等于父div#placeholder的高度，而是祖父母div#home-screen的高度。

<!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>

Page style is as follows: 页面样式如下：

* {
    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; }

Also, {min-height: 200px; } 另外， {min-height: 200px; } {min-height: 200px; } doesn't seem to work. {min-height: 200px; }似乎无效。

Any ideas? 有任何想法吗？ Thank you in advance. 先感谢您。

UPDATE 1: min-height does work, but it does not prevent the parent DIV from collapsing. 更新1：最小高度确实可以工作，但是它不能防止父级DIV崩溃。

Answer 1

I edited the following id's - is this the effect you were after? 我编辑了以下ID，这是您想要的效果吗？

div#placeholder {
    height: 100%;
    background-color: #0f0;
}
div#placeholder div.images {
    left: 5%;
    margin: 5px 0;
    width: 90%;
    height: 100%;
    min-height: 200px;
    background-color: #ccc;
}

Answer 2

The code should be rewritten as: 该代码应重写为：

<div id="placeholder">
    <div id="wrapper">
        <div class="images"></div>
        <div class="images"></div>
        <div class="images"></div>
    </div>
</div>

The div#wrapper needs the following styles: div#wrapper需要以下样式：

div#wrapper {
    display: table-cell; 
    position: relative; }

DIV {高度：100％；继承祖父母的身高并溢出父母的身高

问题描述

2 个解决方案

解决方案1
0 2014-05-07 00:09:06

解决方案2
0 已采纳 2014-05-07 06:55:01

DIV {高度：100％； 继承祖父母的身高并溢出父母的身高

问题描述

2 个解决方案

解决方案1 0 2014-05-07 00:09:06

解决方案2 0 已采纳 2014-05-07 06:55:01

DIV {高度：100％；继承祖父母的身高并溢出父母的身高

解决方案1
0 2014-05-07 00:09:06

解决方案2
0 已采纳 2014-05-07 06:55:01