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%;

到你的容器，让它的孩子占用空间。父级容器在绝对定位时必须指定其宽度。

在绝对定位的容器容器内获取浮动div到宽度

1 个答案: