html - 如果正文为 95%，如何将页脚设置为 100%？

Question

我的任务是稍微改变一个网站，现在，该网站有一个响应式布局，占视口宽度的 95%，身体方面，所以如果调整大小，它会调整。

这很好，我希望它继续这样做，但我希望页脚有一个并排平静的蓝色背景，并且由于某种原因我无法想出一种方法来做到这一点。

任何人都可以帮忙吗？

Answer 1

试试这个 -演示

HTML

<div id="container">
    <h1>TITLE</h1>

    <section>MAIN CONTENT</section>

    <footer> FOOTER </footer>
</div>​

CSS

#container {
    width: 95%;
    margin: auto;
    background: honeydew;
}

footer {
    position: absolute;
    width: 100%;
    background: beige;
    margin-left: -2.5%;
}

Answer 2

body包含所有其他元素。因此，你不应该有一个比body里面大的。

尽管您可以将其绝对定位到position: absolute; bottom: 0px; left: 0px;宽度为的100%左下角(并将页脚放在该容器之外。divbody

但是，我不确定哪种方法更可靠。

Answer 3

您是否尝试过用其他“包装器”组件（div、span 等）包装现有的“标题”组件？例子：

<div id="wrapper" width="100%"

<div id="header" width="95%">
  some header stuff here
</div>

<!-- foo bar --> 

<div id="footer" width="100%">
  my footer
</div>

</div>