所以我似乎有两个问题从两种不同的方法试图得到页脚的权利。使用position: abslotute;将使页脚停留在浏览器的底部，而不是在内容下面。因此，当你打开网页时，你会看到底部的页脚，但当你向下滚动查看其余内容时，它将保持在它被发现的位置(这是重叠的一个div)。所以我尝试了clear: both;，这与position: absolute;的组合不工作，这使得页脚在内容下，但它将留在那里，而不是在页面的实际底部。我如何最终整理这个页脚，保持它在页面的底部，即使在不同的屏幕大小和内容之下?
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: white;
font-family: arial;
}
nav {
height: 60px;
background: #dfd9d3;
}
nav ul {
padding: 0;
margin: 0 auto;
}
nav ul li {
list-style: none;
font-family: arial;
font-size: 15px;
}
nav ul li a {
text-decoration: none;
float: left;
display: block;
padding: 20px 20px;
color: white;
font-weight: bold;
margin: 0 0px;
}
nav ul li a:hover {
background-color: #d9d1c7;
}
#indexContent {
width: 100%;
height: 100%;
}
#Banner {
width: 100%;
height: 500px;
border-bottom: solid 4px orange;
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 40%;
transform: translateY(-40%);
}
#logoBanner {
width: 100%;
height: 498px;
position: absolute;
top: 65px;
text-align: center;
}
#logoBanner img {
width: 400px;
height: auto;
margin-top: 70px;
}
#sloganBanner {
border-top: solid white 3px;
border-bottom: solid white 3px;
position: absolute;
top: 425px;
width: 50%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#indexSlogan {
margin: 0;
font-size: 25px;
color: white;
}
#indexBottom {
width: 100%;
}
#indexTitleB {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#indexH2Title {
width: 400px;
border-bottom: solid black 2px;
margin: 7px auto;
padding-bottom: 5px;
font-size: 25px;
margin-bottom: 0;
}
#indexLeftB {
float: left;
width: 50%;
text-align: center;
}
#indexRightB {
float: right;
width: 50%;
text-align: center;
}
.indexH2 {
margin: 0;
font-size: 22px;
}
indexBImage {
width: 281px;
border: solid black 5px;
border-radius: 100%;
margin: 0 auto;
}
.indexImage {
width: 280px;
height: auto;
}
.container {
min-height: 100%;
position: relative;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: black;
text-align: center;
width: 100%;
height: 60px;
clear: both;
}
.indexContent {
padding-bottom: 60px;
}<body>
<div id="container">
<nav>
<div id="logo">
<a href="index.html">
<img src="" />
</a>
</div>
<ul>
<li><a id="active" href="#">Home</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">link</a>
</li>
<li><a href="#">link</a>
</li>
</ul>
</nav>
<div id="indexContent">
<div id="Banner">
<div id="backgroundBanner">
<img src="">
</div>
<div id="logoBanner">
<img src="">
</div>
<div id="sloganBanner">
<h1 id="indexSlogan">Some text text text text text text</h1>
</div>
</div>
<div id="indexBottom">
<div id="indexTitleB">
<h2 id="indexH2Title">Some text</h2>
</div>
<div id="indexLeftB">
<div class="indexBTitle">
<h2 class="indexH2">Some text</h2>
</div>
<div class="indexBText">
<p class="indexP">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
<br>TextTextTextTextTextTextTextTextText <a href="#">Text</a> TextTextTextTextTextTextTextTextTextText.
<br>
</p>
</div>
<div class="indexBImage">
<img src="" class="indexImage">
</div>
</div>
<div id="indexRightB">
<div class="indexBTitle">
<h2 class="indexH2">Some Text</h2>
</div>
<div class="indexBText">
<p class="indexP">Some Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextTextText
<br>Some Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div class="indexBImage">
<img src="" class="indexImage">
</div>
</div>
</div>
</div>
<footer>
</footer>
</div>
</body>我花了好几个小时和好几个网页的时间来寻找一个页脚，但却没有使用position: fixed;我向您介绍解决方案:http://mystrd.at/modern-clean-css-sticky-footer/如果您有溢出的内容，只需在您的容器/包装器div中添加一个新的div:
#footerSpacing { clear: both; height: 80px;
高度将分隔页脚和内容。并明确:两者都将确保没有任何内容与div重叠。