为什么我的两个div不能扩展包含div的整个高度？

Question

HTML：

  <div id="main" class="rounded-corners"> 

       <div id="benefits"> 

        <img src="/benefits-heading.png" style="padding: 30px;" /> 

        <div id="corporateside"> 
         <h1>Corporate Benefits</h1>  
         <p>blah</p> 
        </div> 

        <div style="clear: both;"></div> 

        <div id="employeeside"> 
         <h1>Employee Benefits</h1> 
         <p>blah</p> 
        </div> 

        <div style="clear: both;"></div> 

       </div> 

      </div> 

CSS：

#corporateside { width: 420px; height: 100%; position: absolute; left: 0; padding: 20px; height: 100%; display: block; } 
#corporateside h1 { font-size: 24px; font-weight: 500; } 
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; } 
#corporateside p { padding: 0px; margin-top: -10px; } 
#employeeside { width: 420px; position: absolute; right: 0; padding: 20px; height: 100%; display: block; } 
#employeeside h1 { font-size: 24px; font-weight: 500; } 
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; } 
#employeeside p { padding: 0px; margin-top: -10px; } 
#benefits { position: relative; height: auto; } 
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } 

我已经从每个格取出position: absolute;修复了这个问题。我还删除了两个divs之间的<div style="clear: both;"></div>。谢谢你的帮助！

Answer 1

这是因为你的div设置为position: absolute;。这将从文档流中移除div，因此包含元素的行为就好像div的布局不存在一样。

我不知道你要什么了，但如果你要调整两个div的位置，尽量相对位置或检查他们的利润和填充。 CSS重置作为一个统一布局的常用工具非常有用，尤其是跨浏览器。

下面是我的建议jsfiddle，并排显示的div和容器的行为与所需。 http://jsfiddle.net/wCnLZ/