html - 在绝对定位的容器容器内获得浮动 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/ 我希望不要在左右两侧放置 Container div 或 footer div 并让它占据剩余空间。

Answer 1

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

本质上，我只需要添加

width: 100%;

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