Question

阅读本文后http://camendesign.com/code/developpeurs_sans_frontieres 我决定遵循它的说法，并从我的网站设计中删除包装。给我的body元素一个宽度，给html和css不同的背景colours.etc

事情很好，我真的很感动它，直到我需要添加一个页脚。此刻，我有点卡住了。由于我的页脚标签必须位于body元素内部，因此它的宽度仅延伸到body元素的宽度（600px）。白色的盒子仍然环绕着我的页脚，而不是像我预期的那样在我的页脚之前结束。

有没有办法可以让页脚像你在其他网站上看到的任何页脚一样（页脚以不同的颜色跨越页面的整个宽度，而不回到包装div？

这是一个截图： enter image description here

Answer 1

Live Demo

<!DOCTYPE html> 
<style> 
    html    {height: 100%; width: 680px; margin: 0 auto; padding: 0;
         background: #c72;}
    body    { min-height: 100%; margin: 0; padding: 0 20px;
         border: 1px solid black; border-width: 0 1px;
         font: 13px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
         color: #333;
         background-color: #eee;}
    #footer {
        position: absolute;
        width: 100%;
        left: 0;
        background: #ccc
    }
</style> 
<body> 
    Lorem ipsum dolor sit amet..

    <div id="footer">footer</div>
</body>

请注意，它不是"sticky"：http://jsbin.com/ifika6/2

Answer 2

首先，为正文设置padding-bottom: 0，为页脚div设置margin-bottom: 0（或者你使用的任何东西），这样可以触及底部。

Answer 3

如果我是你，那么我会做以下事情：

CSS

.wrapper{
    margin:0 auto;
    width:980px;/*your width will goes here*/
    background: green;
}

.footer{
    background: red; /*your style will goes here*/
}

HTML：

<div class="wrapper">
    MainContent will goes here.....
</div>
<div class="footer">
    this is footer..... 
</div>

希望它可以帮助您解决问题......

中心和布局页面没有包装和页脚

3 个答案: