html - 页脚背景不显示全高

Question

正在清理新站点页脚中的一些 html，现在页脚背景颜色未显示全高。它在清理之前显示正确，我没有触及 CSS 中的任何内容，想知道我是否只是忽略了一些小东西。

当前的 CSS:

#footer {
width: 100%;
margin: 20px 0;
position: relative;
padding: 20px 0;
background-color: rgba(0, 151, 214, 1);
} 

注意:我不想指定高度，即。 600px 然后必须重新调整几个断点的高度或最小高度。

谢谢!

Answer 1

页脚元素 (id=footer) 正在“折叠”，因为它的所有子元素都是 float 的。要解决此问题，您可以应用 clearfix hack。您可以添加一个名为 .clearfix 的新类并将该类添加到页脚元素，或者您可以将此代码应用于页脚元素；

#footer:after {
  content: "";
  display: table;
  clear: both;
}

您可以在此处阅读有关 clearfix/group hack 的更多信息:https://css-tricks.com/snippets/css/clear-fix/