爲什麼我的頁腳重疊在我的頁面底部的內容？

網站的問題：christianselig.com 爲什麼我的頁腳重疊在我的頁面底部的內容？

在我有一個消息，說該頁面下方的「就像你看到的，我們應該談談？」。但由於某種原因，與其他頁面不同，這一頁與頁腳重疊。

CSS：

.message { 
    margin: 150px 0; 
    text-align: center; 
}

HTML：

  <div class="message"> 
       <span class="first-part">Like what you see?</span> 
       <span class="second-part"><a href="contact.html">We should talk.</a></span> 
      </div> 

      <div class="footer-wrapper"> 
       <div class="footer"> 
        <p class="copyright">Copyright &copy; 2012 Christian Selig</p> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="about.html">About</a></li> 
         <li><a href="#work" class="scroll">Work</a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </div> 
      </div>

正如你所看到的，我還以爲我給的頂部和底部邊緣的.message CSS 150像素，但它似乎並沒有被踢在底部。我可以給它填充，但似乎並沒有被妥善的解決辦法，因爲我不想要的元素跨越這麼多空間，我只是希望它推向其他的東西了。

潛力的認識：邊距推它的內容了，但必須有內容在那裏。因爲它是最後一個元素的網頁上，它沒有任何關係推離，所以填充是必要的？如果這是真的，還有更好的方法嗎？

來源

2012-09-16 Doug Smith

填充爲我的偉大工程：

.message { 
    padding: 150px 0; 
    text-align: center; 
}

http://fiddle.jshell.net/3EYdq/2/show/

來源

2012-09-16 00:17:27 yckart

請將這些問題標記爲已回答！ – yckart

從div.footer-wrapper然後取出position: absolute;調整您的.messagediv.message

.footer-wrapper { 
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #D6D6D6 100%) repeat scroll 0 0 transparent; 
    border-top: 1px solid #CCCCCC; 
    bottom: 0; 
    height: 16px; 
    overflow: hidden; 
    padding: 8px 0 5px; 
    width: 100%; 
}

你不需要填充邊緣，這裏的錯誤是絕對定位的.footer-wrapper DIV而不需要（據我可以看到？）

編輯：作爲另一個答覆中提到，結算是有點亂。加入

.wrapper { 
    padding-bottom: 1px; 
}

似乎幫助，如果你想速戰速決，但是正確的清算會的方式更好。爲您的網站在IE怪癖模式更顯示錯誤呈現

<!doctype html>

：

還，您可能希望將文檔類型添加到您的頁面的頂部，等等。

來源

2012-09-16 00:16:24 Luca

如果內容小於屏幕，則不會很漂亮;） – yckart

如果他想實現粘性頁腳，則爲true，在這種情況下，問題位於其他位置。 – Luca

也許，我同意！ :) – yckart

這是因爲你的頁腳是絕對定位在底部，放置在無論發生在那裏。

只需添加像50像素到.message底部填充，並且如果將其下的額外空間。

.message { 
    margin: 150px 0; 
    padding-bottom: 50px; 
    text-align: center; 
}

來源

2012-09-16 00:30:35 Krycke

一切都有些破碎，因爲你沒有清除你的浮動。個人信息

您可以使用此clearfix

.cf:before, 
.cf:after { 
    content: " "; 
    display: table; 
} 

.cf:after { 
    clear: both; 
} 

.cf { 
    *zoom: 1; 
}

，然後將其應用到<div class="personal-info cf">

此外，最好使用sticky footer而不是絕對位置。正如yckart所說，填充也是一個很好的方法。

來源

2012-09-16 00:31:07

爲什麼我的頁腳重疊在我的頁面底部的內容？

回答

相關問題