Wrapper div不会与Content div展开 - 非常令人沮丧 [英] Wrapper div won't expand with Content div - Very frustrating

问题描述

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

I have seriously tried about 15 different tutorials and tricks to get my footer, header and three content divs working.

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

My page will have a header, navigation bar on the left, content in the middle, shop and Google ads on the right and a footer down below

现在，在尝试了几个教程后，我终于得到了我的页脚但是不幸的是，如果内容或广告或导航变大，则包装器将不会变大，因此内容和所有内容将超出包装盒和页脚之外。

Now after trying a few tutorials I've finally gotten my footer to stay under the wrapper but unfortunately the wrapper won't grow bigger if the content or ads or navigation goes bigger, so the content and all will go outside of the wrapper box and over the footer.

有人可以告诉我我在做什么吗？

Could someone please tell me what I'm doing wrong?

这里是我的代码：

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

On jsfiddle： http://jsfiddle.net/PskYb/1/

On jsfiddle: http://jsfiddle.net/PskYb/1/

推荐答案

你的包装器不会生长，因为里面的所有元素在 position：absolute 。

your wrapper wont grow because all the elements inside are in position:absolute. Use float instead, and a clearer at the bottom of the wrapper.

好运

编辑： http://jsfiddle.net/PskYb/6/

这篇关于Wrapper div不会与Content div展开 - 非常令人沮丧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！