看来我在尝试使页脚正确的两种不同方法中遇到了两个问题。
使用 position: abslotute; 将使页脚停留在浏览器的底部，但不在内容下方。因此，当您打开网页时，您会在底部看到页脚，但当您向下滚动查看其余内容时，它会保留在找到的位置(与 div 重叠)。
所以我尝试了 clear: both; ，它不适用于 position: absolute; 的组合，这使得页脚位于内容下方，但它会保留在那里而不是在页面的实际底部。
我如何最终将此页脚整理出来，即使在不同的屏幕尺寸下也能将其保留在页面底部和内容下方？
这是我的 HTML 和 CSS:
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 重叠。
关于css - 页脚位于浏览器底部，但不在内容下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38876734/