Question

我已经认真尝试了大约15个不同的教程和技巧，以使我的页脚，标题和三个内容div工作。

我的页面左侧有标题，导航栏，中间有内容，右侧有商店和Google广告，下方有一个页脚

现在，在尝试了几个教程之后，我终于让我的页脚停留在包装器之下但不幸的是，如果内容或广告或导航变大，包装器将不会变大，所以内容和所有内容都会超出包装盒和页脚上方。

有人可以告诉我我做错了吗？

这是我的代码：

<div id="Header">
    header
</div>
<div class="Wrapper">

    <div id="Navigation">
        Navigation <br />
        Nav 2 <br />
        Yes
    </div>

    <div id="Content">
        content goes here
    </div>

    <div id="Ads">
        Ad1 <br />
        ad2
    </div>

    <div class="Push"></div>

</div>

<div class="Footer">
    Footer
</div>

CSS：

.Wrapper {
    position: relative;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding-bottom: -150px;
    padding-top: -150px;
    border: thin solid #000;
}
#Header {
    position: relative;
    height: 150px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
#Navigation {
    position: absolute;
    width: 235px;
    left: 5px;
}
#Content {
    position: absolute;
    width: 500px;
    padding-right: 250px;
    padding-left: 250px;
    height: 100%;
    overflow: auto;
}
#Ads {
    position: absolute;
    width: 235px;
    right: 5px;
}
.Footer {
    position: relative;
    height: 150px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}
.Push {
    height: 150px;
    clear: both;
}
body, html {
    height:100%;
    margin:0px;
    padding:0px;
}

关于jsfiddle：http://jsfiddle.net/PskYb/1/

Answer 1

你的包装器不会生长，因为里面的所有元素都在position:absolute中。请改用浮点数，并在包装器的底部使用更清晰的颜色。

祝你好运

编辑：这是一个例子http://jsfiddle.net/PskYb/6/

Answer 2

如果你做任何位置：绝对不会被这里的div a link识别！该链接为您提供了一个示例。

包装div不会随Content div扩展 - 非常令人沮丧

2 个答案: