我在使CSS工作时遇到了问题，特别是涉及到页脚时。
我有一个主体，我想与页脚分开。想象一个包含内容的框，下面有一个小空格（在我的CSS中称为＆＃34; prefoot＆＃34;），页面底部有一个页脚区域。
我真的不需要一个悬在内容上的粘性页脚（尽管这就是我目前的例子）。
最终，我不希望＆＃34; prefoot＆＃34;显示。我只想在<div class="main">和<div class="footer">之间填充。
body {
color: #999999; /* silver */
background-color: #004392; /* dress blues blue */
font-family: sans-serif, monospace;
text-shadow: 1px 1px 1px rgba(0,43,92,80);
}
div.main {
position: absolute;
left: 100px;
width: 80%;
overflow:auto;
}
.prefoot {
display: block;
background-color: gold;
position: fixed;
left: 50px;
height: 20px;
bottom: 30px;
width: 80%;
}
.footer {
display: block;
background-color: red;
position: fixed;
left: 50px;
height: 20px;
bottom: 10px;
width: 80%;
}<body>
<div class="main">
<h1>Body Ends at Prefoot</h1>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<img src="http://i.imgur.com/3DRalRX.gif" />
</div>
<div class="prefoot">
</div>
<div class="footer">
Created 11 Sept 2015 (Remember 9/11!)
</footer>
</body>
答案 0 :(得分：1)
页脚悬停在内容上的原因是因为您的内容为position: absolute;且页脚为position: fixed;。这将导致这两个元素都不会影响对方的位置，这意味着页脚不会简单地在内容之后“流动”;而页脚也设置在屏幕上的“固定”位置。尝试类似：
body {
color: #999999; /* silver */
background-color: #004392; /* dress blues blue */
font-family: sans-serif, monospace;
text-shadow: 1px 1px 1px rgba(0,43,92,80);
}
div.main {
left: 100px;
width: 80%;
overflow:auto;
}
.footer {
margin: 50px;
display: block;
background-color: red;
left: 50px;
height: 20px;
bottom: 10px;
width: 80%;
}<body>
<div class="main">
<h1>Body Ends at Prefoot</h1>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<img src="http://i.imgur.com/3DRalRX.gif" />
</div>
<div class="prefoot">
</div>
<div class="footer">
Created 11 Sept 2015 (Remember 9/11!)
</footer>
</body>
此外，使用应用于元素的边距可以实现'prefoot'的效果 - 例如上面margin: 50px;类中显示的.footer。
希望这有帮助。
答案 1 :(得分：1)
如果您想在内容和页脚之间留一些空隙，请使用这些css
body {
background-color: #004392;
color: #999999;
font-family: sans-serif,monospace;
margin: 0;
text-shadow: 1px 1px 1px #002b5c;
}
div.main {
left: 100px;
overflow: auto;
position: relative;
width: 80%;
}
.footer {
background-color: #ff0000;
bottom: 0;
display: block;
height: 20px;
left: 50px;
margin-top: 50px;
position: relative;
width: 80%;
}