让浮动的div到一个绝对定位的容器容器

Question

所以我工作的一些HTML/CSS里面的东西宽

我似乎无法得到这两种漂浮的div和页脚是正确尺寸的父内DIV。

内容div绝对定位为分别显示页眉和页脚。

HTML：

<div id="Content"> 
     <div id="Header">header</div> 
     <div id="Container"> 
      <div id="leftTable"> 
       <div>left content</div> 
      </div> 
      <div id="rightTable"> 
       <div>right content</div> 
      </div> 
     </div> 
     <div id="Footer"> 
      <div>footer</div> 
     </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#Content { 
    padding: 0 15px; 
    height: 100%; 
    background-color: honeydew; 
    position: relative; 
    height: 100%; 
} 
#Header { 
    height: 60px; 
    background-color: aliceblue; 
} 
#Footer { 
    position: absolute; 
    bottom: 0; 
    background-color: purple; 
    height: 70px; 
} 
#Container { 
    background-color: green; 
    position: absolute; 
    top: 60px; 
    bottom: 70px; 
    margin-right: 15px; 
} 
#Container:after { 
    clear:both; 
} 
#leftTable { 
    float: left; 
    width: 50%; 
    height: 100%; 
    background-color: grey; 
} 
#rightTable { 
    float: left; 
    width: 50%; 
    background-color: blue; 
} 

http://jsfiddle.net/4CabB/12/ 我希望没有位置左侧和右侧的集装箱股利或页脚股利，只是有它占用剩余空间。

Answer 1

我有点不清楚什么需要实现，但也许这可以解决您的问题：JSFiddle。

从本质上讲，我只是需要

width: 100%; 

添加到您的容器允许其子女占用空间。父容器在绝对定位时必须指定其宽度。