如何避免页脚div与页面内容重叠？
我使用这段代码通过JSTL打印表。该表位于contentFrame目录中。然而，最初位于底部的页脚开始浮动并与contentFrame重叠。我不想让页脚保持在一个固定的位置。有没有办法把它放在页面的底部，这样当新内容被添加时，它就会被“下推”？
body {
background-color: blue;
}
#contentFrame {} #date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
background-color: orange;
bottom: 0px;
left: 0px;
position: absolute;
text-align: center;
width: 100%;
}<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah@email.com </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
编辑:使用bootstrap中的粘性页脚，它起作用了
回答 4
Stack Overflow用户
发布于 2015-12-17 01:23:03
解决这个问题的一种方法是：
如果要监视浏览器视口的高度，并且position: absolute
- Use
- 的高度超出了其余视口的高度，请将
position: relative
更改为
- 为
#footerFrame提供一个默认的position: absolute - Use
.js
function positionFooter() {
var contentFrame = document.getElementById('contentFrame');
var footerFrame = document.getElementById('footerFrame');
var contentY = contentFrame.offsetTop;
var contentHeight = contentFrame.clientHeight;
var viewportHeight = window.innerHeight;
var footerHeight = footerFrame.clientHeight;
if ((contentY + contentHeight) > (viewportHeight - footerHeight)) {
footerFrame.style.position = 'relative';
}
else {
footerFrame.style.position = 'absolute';
}
}
window.addEventListener('load',positionFooter,false);
window.addEventListener('resize',positionFooter,false);body {
background-color: blue;
}
#contentFrame {
height: 300px;
}
#date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: orange;
text-align: center;
}
body, #contentFrame, #footerFrame, #footerFrame p {
margin: 0;
padding: 0;
}<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah@pointwestcom.ph </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
Stack Overflow用户
发布于 2015-12-17 01:00:36
您应该使用<div style="clear:both;"></div>在页脚之前清除浮动，如下所示：
<div style="clear:both;"></div>
<div id="footerFrame">
<p>footer</p>
</div>但不需要对footerFrame absolute进行定位
#footerFrame {
background-color: orange;
text-align: center;
width: 100%;
}要了解更多有关FLOATS和的信息，请查看以下内容：https://css-tricks.com/all-about-floats/
Stack Overflow用户
发布于 2015-12-17 01:02:13
你的内容有多大？
如果从#footerFrame css中删除“position :absolute；”或“bottom:0px；”，页脚将向上移动到页面内容下的位置。
如果您的内容不够大，无法填满整个窗口，则可能不需要这样做。
已经有许多脚注解决方案，所以如果你搜索它们，它会向你展示许多方法，你可以实现一个脚注解决方案，这将为你工作。
https://stackoverflow.com/questions/34316745
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号