html - div高度在div内100%

Question

我得到了下面的代码，但它不起作用:

<div id="wrap">
    <div class="navigation">    
        <ul>      
            <li>
            </li>
        </ul>
     </div>


     <div id="main">
       Content
     </div>
</div>

我希望包裹的高度为 100%。这很好用。但是，一旦我尝试将#main div 也设置为 100% 高度，它就不会。这个 div 总是折叠到内容的高度。

html{height:100%;}
body{overflow-y:scroll; margin:0px; padding:0px; height:100%;}
#wrap{
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */ 
    height:100%; /* Mindesthöhe für den IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
}


#main{
    width: 980px !important;


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


}

有人可以帮我解决这个问题吗？提前致谢

Answer 1

更改wrap 的样式。 Live Demo

#wrap {
    min-height: 100%; /* Minimum height for modern browsers */
    height:100%; /* Minimum height for IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
    border:1px solid blue;
}