包装DIV不会与内容DIV扩大 - 非常令人沮丧

我曾认真地尝试了大约15种教程和技巧,让我的页脚,页眉和工作三种内容的div。

我的页面都会有一个标题,导航左侧中间,铺在右边栏,内容和谷歌广告和楼下页脚

现在,尝试一些教程后,我终于得到了我的页脚留在包装下,但不幸的是,如果内容或广告或导航去更大的包装不会变大,所以内容和所有将去包装盒的外面,在页脚。

可能有人请告诉我,我做错了什么?

这里是我的代码:

<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/

--------------解决方案-------------

您的包装不会增长,因为所有的元素中处于position:absolute 。 在包装件的底部用浮子代替,并且更清楚。

祝你好运

编辑:这里是一个为例http://jsfiddle.net/PskYb/6/

如果你做什么的位置是:绝对不会被这里的div链接认可! 链接为您提供了一个例子。

分类:CSS 时间:2013-12-29 人气:0
本文关键词: CSS
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.405 (s). 10 q(s)