嘿我学习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吗？浮动元素是不是搞砸了？
提前感谢所有寻求帮助的人。
答案 0 :(得分：1)
HTML的正常流程是从顶部开始并转到底部。您的页脚位于底部，但p元素只有一个线框高。所以它应该从你的页脚顶部开始。如果您将页脚的高度设置为小于4em的高度，您将看到差异。或者，就此而言，将字体大小或行高设置为4em，看看会发生什么。
答案 1 :(得分：1)
我清理了一下你的HTML，以帮助你入门。
对于有效的HTML，请确保您的li元素是ul（或ol）元素的子元素。
此外，<title>不是有效的HTML代码。但是，title是某些HTML标记的有效属性。 <title>标记用于元数据，作为文档<head>部分的一部分，有关详细信息，请参阅：
http://www.w3.org/TR/html5/document-metadata.html#the-title-element;
请注意，由于position: fixed使用#footerBottom，因此该元素将从内容流中取出并相对于视口定位。 #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>