html - 如何避免页脚div与页面内容重叠？

我使用此代码使用JSTL打印表。该表位于contentFrame div中。但是，最初位于底部的页脚开始浮动并与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"> [email protected] </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>

编辑：使用了自举程序的粘性页脚，它的工作原理

最佳答案

解决此问题的一种方法是：


为#footerFrame提供默认的position: absolute
使用.js监视浏览器视口的高度和#contentframe的高度
如果#contentframe高度超过了剩余的视口高度，请将#footerFrame更改为position: relative

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"> [email protected] </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>