Question

我正在使用peter的优秀示例来获得具有粘性页脚（HERE）的100％高度div。我省略了页脚部分，我没有使用它。

但是，每当我使用子div并尝试做同样的事情时，它就无法工作。我想要一个孩子div也要占据其父母身高的100％。这是CSS：

<style>


    html,body {
        margin:0;
        padding:0;
        height:100%; /* needed for container min-height */
        background:gray;

        font-family:arial,sans-serif;
        font-size:small;
        color:#666;
    }



    div#container {
        position:relative; /* needed for footer positioning*/
        margin:0 auto; /* center, not in IE5 */
        width:750px;
        background:#f0f0f0;

        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/

        min-height:100%; /* real browsers */
    }

    div#header {
        padding:1em;
        background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
        border-bottom:6px double gray;
    }


    div#content {
        padding:1em 1em 5em; /* bottom padding for footer */
        position:relative; /* needed for footer positioning*/
        margin:0 auto; /* center, not in IE5 */

        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/

        min-height:100%; /* real browsers */            
    }
    div#content_subdiv{
        padding:1em 1em 5em; /* bottom padding for footer */
        background:#999;
        height:100%;

        color:#fff;
    }


</style>

这是我的HTML代码：

<div id="container"> 

    <div id="header"> 
        <h1>CSS layout: 100% height with header and footer</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget massa dolor, rhoncus tempor nunc. Donec tempor odio eget purus vehicula auctor. </p> 
    </div> 

    <div id="content"> 

        <p> 
    Aenean quam mauris, iaculis non aliquet quis, facilisis sed turpis. Cras id erat velit, nec bibendum erat. Vivamus feugiat purus vitae velit dictum in vestibulum ante tristique. Vestibulum ut massa vel justo eleifend consectetur eget ut nisi. Phasellus ut diam nulla. Suspendisse potenti. Praesent blandit gravida facilisis. Donec elementum faucibus gravida. Nullam nec enim velit, ac scelerisque justo. Pellentesque lacus metus, adipiscing nec congue a, volutpat sollicitudin eros. Donec tortor leo, tempor non viverra at, molestie sed dui. Nullam ipsum purus, tempus elementum tincidunt id, iaculis at lectus. Vestibulum viverra mi in mauris ultrices sollicitudin
        </p> 
        <div id="content_subdiv"> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /></div>
    </div> 

</div>

Answer 1

您只能将min-height：100％应用于身体的第一个元素。

将标题放在内容div中或创建一个min-height：100％包装div。

Answer 2

然后尝试以下代码：

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray ;
    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}



div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}


div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */            
}
div#content_subdiv{
    padding:1em 1em 5em; /* bottom padding for footer */
    background:#999;
   color:#fff;    }  
< div id="header "> 
    < h1 >CSS layout: 100% height with header and footer</ h1 > 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget massa dolor, rhoncus tempor nunc. Donec tempor odio eget purus vehicula auctor. </p> 
</div> 

<div id="content"> 

    <p> 
Aenean quam mauris, iaculis non aliquet quis, facilisis sed turpis. Cras id erat velit, nec bibendum erat. Vivamus feugiat purus vitae velit dictum in vestibulum ante tristique. Vestibulum ut massa vel justo eleifend consectetur eget ut nisi. Phasellus ut diam nulla. Suspendisse potenti. Praesent blandit gravida facilisis. Donec elementum faucibus gravida. Nullam nec enim velit, ac scelerisque justo. Pellentesque lacus metus, adipiscing nec congue a, volutpat sollicitudin eros. Donec tortor leo, tempor non viverra at, molestie sed dui. Nullam ipsum purus, tempus elementum tincidunt id, iaculis at lectus. Vestibulum viverra mi in mauris ultrices sollicitudin
    </p> 

</div> <div id="content_subdiv"> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /></div>

Answer 3

好的，我没有在问题中看到#content_subdiv的CSS ......？

儿童div高度100％被忽略

3 个答案: