css - 没有包装但有页脚的中心和布局页面

标签 css

读完这篇文章后http://camendesign.com/code/developpeurs_sans_frontieres 我决定遵循它的规定,从我的网站设计中消除包装。给我的 body 元素一个宽度,给 html 和 css 不同的背景颜色等

一切工作正常,我对它印象深刻,直到我需要添加页脚。此刻,我有点陷入困境。由于我的页脚标签必须位于 body 元素内部,因此它的宽度仅延伸到 body 元素的宽度(即 600px)。并且白色框仍然围绕着我的页脚,而不是像预期那样在我的页脚之前结束。

有没有办法让页脚像您在其他网站上看到的任何页脚一样(页脚以不同的颜色跨越页面的整个宽度,而无需返回到包装器 div?

这是一个屏幕截图: enter image description here

最佳答案

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

关于css - 没有包装但有页脚的中心和布局页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5534854/

相关文章:

css - 在 Rails 4 应用程序中添加 Bootstrap 下拉样式

CSS中心分层动态div

javascript - 循环 2 "Loading"背景图片

firefox - 如何为所有属性指定 CSS3 过渡,但有一个异常(exception)/覆盖?

java - 选择 TreeTableRow 不会更改背景颜色

jquery - Bootstrap typeahead 不起作用

html - 我的主页和关于链接是否超链接到正确的页面?

CSS 在 FF 和 Chrome 中看起来很棒,但在 IE8 中却不是

html - 使用 html/css 我可以在每页的底部打印一个页脚(就像打印机一样)吗?

HTML 对象 - 将视频放入网页 - 无法停止 AUTOSTART