页脚有问题

Question

嘿，我正在学习 HTML 和 CSS 并且之前在页脚方面取得了成功，但出于某种原因，无论我尝试什么，这个特定项目总是给我带来页脚问题。

我有一些浮动元素，并使用包装器将它们放入。

我想要的是始终贴在页面底部的页脚。无论内容或滚动行为如何。

当我这样做时，出于某种原因，即使我在 HTML 编码中将页脚放置在包装元素之外，页脚仍然粘在包装元素的 顶部.

#footerBottom { position: fixed; bottom: 0; width: 100%; height: 4em; background-color: black; }

<div id="header"> <title>The Title Of The Website</title> </div> <nav> </nav> <div id="wrapper"> <div id="contentLeftOne"> </div> <div id="contentLeftTwo"> </div> <div id="contentLeftThree"> </div> <aside id="sideTop"> </aside> <aside id="sideMiddle"> </aside> <aside id="sideBottom"> </aside> </div> <div id="footerBottom"> <p>Here Is A Footer But It Isn't Sticking To The Bottom</p> </div>

当我将它放在包装器内时，它位于包装器元素的顶部。

我在监督什么吗？我用谷歌搜索了一堆，但似乎没有什么可以解决的。我需要使用 jQuery 吗？是浮动元素搞砸了吗？

在此先感谢所有试图提供帮助的人。

Answer 1

HTML的正常流程是从上往下走。您的页脚位于底部，但 p 元素只有一个行框高。所以它应该从页脚的顶部开始。如果将页脚的高度设置为小于 4em 的高度，您会看到差异。或者，就此而言，将字体大小或行高设置为 4em，看看会发生什么。

Answer 2

我稍微清理了你的 HTML 以帮助你开始。

对于有效的 HTML，请确保您的 li 元素是 ul（或 ol）元素的子元素。

此外，<title> 不是有效的 HTML 标签。但是，title 是某些 HTML 标签的有效属性。 <title> 标签作为文档 <head> 部分的一部分用于元数据，有关详细信息，请参阅： http://www.w3.org/TR/html5/document-metadata.html#the-title-element;

请注意，由于您对 #footerBottom 使用 position: fixed，因此该元素将从内容流中取出并根据视口进行定位。 #footerBottom 可以出现在您的脚本中的任何位置，并且它将定位在您的 CSS 规则指定的位置。

#footerBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background-color: black;
  color: white;
}
#wrapper {
  margin-bottom: 4.5em; /* or else you can see it beneath the footer... */
}
#wrapper, nav {
  border: 1px dotted blue;
}
#wrapper div {
  min-height: 25px;
  background-color: beige;
  margin: 10px 100px 10px 0;
}
#wrapper aside {
  width: 50px;
  min-height: 25px;
  background-color: lightblue;
  margin: 10px 0;
}

<div id="header">
  <h3>The Title Of The Website</h3>
</div>
<nav>
  <ul>
  <li><a href="#">Page1</a></li>
  <li><a href="#">Page2</a></li>
  <li><a href="#">Page3</a></li>
  <li><a href="#">Page4</a></li>
  </ul>
</nav>

<div id="wrapper">
  <div id="contentLeftOne"></div>
  <div id="contentLeftTwo"></div>
  <div id="contentLeftThree"></div>
  <aside id="sideTop"></aside>
  <aside id="sideMiddle"></aside>
  <aside id="sideBottom"></aside>
</div>

<div id="footerBottom">
  <p>Here Is A Footer But It Isn't Sticking To The Bottom</p>
</div>

页脚有问题

Trouble with footer

css

footer