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

Question

我使用此代码使用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"> 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> 

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

Answer 1

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

1. 给#footerFrame一个默认position: absolute
2. 使用.js监视浏览器视口的高度和#contentframe的高度
3. 如果#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"> 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> 

Answer 2

您应该使用<div style="clear:both;"></div>这样在页脚之前清除浮点数：

<div style="clear:both;"></div>
<div id="footerFrame">
  <p>footer</p>
</div>

但无需将footerFrame位置footerFrame absolute ：

#footerFrame {
  background-color: orange;
  text-align: center;
  width: 100%;
}

并了解有关浮动的更多信息，请查看以下链接： https : //css-tricks.com/all-about-floats/

Answer 3

您的内容有多大？

如果删除“ position：absolute;” 或“底部：0像素；” 从#footerFrame css开始，页脚将向上移动以将其自身定位在页面内容下。

如果您的内容不足以填满窗口，则可能不希望这样做。

如果您要搜索SO，已经有许多页脚解决方案，它们将向您展示实现页脚解决方案的多种方法。

Answer 4

编辑注意：这回答了一个不同的问题，因为我认为页眉/页脚需要固定在一个位置。 出于问题标题的有用性，请留在此处，否则不正确。

如果您能够准确地声明页眉和页脚的高度，则这正是position:fixed 。

注意： 我仅使用[attribute]选择器来加快创建演示的速度！ 在您的实际生产代码中使用类代替-这是类的目的，并且不会在将来的某个时刻冒被某些闪亮的新功能所破坏的风险！

http://dabblet.com/gist/a633128f55dbcc160ecc

 [head]{ position:fixed; width:100%; top:0px; height:20px; background-color:#ccc; } [foot]{ width:100%; position:fixed; bottom:0px; height:20px; background-color:#ccc; } [cont]{ /*set the top margin to the height of the header, plus a bit of buffer*/ /*set the bottom margin to the height of the header, plus a bit of buffer*/ margin:25px 0 25px; } 

 <div head> This is a header </div> <div foot> This is a footer </div> <div cont> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p> <p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p> <p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p> <p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p> <p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p> </div> 

如果您无法声明高度，那么...您可以通过包含页眉和页脚的精确副本而无需position:fixed; 但visibility:none; 分别高于和低于您的内容。 请注意，这取决于你如何做到这一点， 为什么大小非申报，和你的页眉/页脚包含，这可能会或可能不会是可行的。

一种不太麻烦的方法是根据页眉/页脚的显示大小在js中添加边距。 实际上，我建议这样做，只要目标浏览器可以支持它即可。

如果您希望页脚仅在内容超出底部时才与底部结婚，则必须使用js检测窗口大小，并将页脚/页眉默认为relative 。 如果窗口溢出，请切换到fixed 。