如何避免頁腳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 。