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

我正在进行一个小的个人项目，尝试重新学习HTML和CSS，我在将我的网站页脚固定到页面底部时遇到了一些问题。可以找到该网站

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

bottom: 0;
position: fixed;

这确实把它钉在了底部，但它超过了我的容器的宽度，看起来不对劲。有人能帮忙吗

---

谢谢。

你可以试着调整页脚的宽度，看看什么适合你。e、 g

width: 100%;
bottom: 0;
position: fixed;

---

你可以试着调整页脚的宽度，看看什么适合你。e、 g

width: 100%;
bottom: 0;
position: fixed;

---

你必须了解如何定位：固定；他正在工作。它忽略任何周围的元素。即，相对于视图端口或浏览器窗口本身定位固定位置元素

您的

.container

样式包括：

margin: auto;
width: 75%;

因此，这也适用于页脚：

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

---

你必须了解如何定位：固定；他正在工作。它忽略任何周围的元素。即，相对于视图端口或浏览器窗口本身定位固定位置元素

您的

.container

样式包括：

margin: auto;
width: 75%;

因此，这也适用于页脚：

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

试试这个：

body {
  line-height: 1;
  height: 100%;
  display: table;
  width: 100%; 
}

footer {
  display: table-row;
  height: 1px;
  width: 100%;
}

footer:before, footer:after {
  content: " ";
  display: table; 
}

footer:after {
  clear: both; 
}

试试这个：

body {
  line-height: 1;
  height: 100%;
  display: table;
  width: 100%; 
}

footer {
  display: table-row;
  height: 1px;
  width: 100%;
}

footer:before, footer:after {
  content: " ";
  display: table; 
}

footer:after {
  clear: both; 
}

---

我已经添加了您建议的代码，但是现在我已经失去了在我的主行div中滚动内容的能力。我希望页脚随着主行（content）中内容的增长而动态向下滚动页面div.我已经添加了您建议的代码，但是现在我已经失去了在我的主行div中滚动内容的能力。我希望页脚随着主行（content）div中内容的增长而动态向下滚动页面。