页脚出现问题

debugcn 发表于 Dev

内森

嘿，我正在学习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吗？是浮动元素使事情搞砸了吗？

在此先感谢您提供的所有帮助。

马克·奥德（Marc Audet）

我对您的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>