html - CSS - 如何将页脚固定到页面底部

Question

我正在做一个小的个人元素来尝试重新学习 HTML 和 CSS，但我在将网站的页脚固定到页面底部时遇到了一些问题。可以找到该网站 here .

我尝试在线搜索，发现我的页脚 CSS 应该具有以下内容:

bottom: 0;
position: fixed;

这确实将它固定在底部，但它超出了我的容器的宽度并且看起来不正确。谁能帮忙？

谢谢。

Answer 1

你必须明白 position: fixed;工作中。它忽略任何周围的元素。 IE。固定位置元素相对于视口(viewport)或浏览器窗口本身定位。

您的 .container 样式是:

margin: auto;
width: 75%;

因此也将此应用到页脚:

footer {
    bottom: 0;
    margin: auto;
    width: 75%;
    position: fixed;
    height: 300px;
    background: #2D2D2D;
    border-top: 12px solid #3E3E3E;
}