底部幫助

我一直在嘗試爲我的網站實施底部欄，但是我覺得我的視覺相當困難。也許你可以啓發我？底部幫助

如果內容沒有溢出邊緣，我希望有一個位於瀏覽器窗口底部的底部欄，但如果內容溢出，我希望內容底部的底部欄。我寧願如果它是CSS解決方案，但它可能會更好/更容易在別的東西，我不知道。也沒有PHP。

我希望你能理解我。

並預先感謝任何答案。

來源

2010-01-04 Thorbjørn Reimann-Andersen

你有沒有看着http://www.cssstickyfooter.com/

來源

2010-01-04 11:34:45

+1更好的答案。我已經撤回了我的。 – 2010-01-04 11:37:53

感謝喬，這似乎正是我所期待的。雖然我有一些實現它的問題。但感謝您在正確的方向點 – 2010-01-04 13:30:26

明白了。謝謝。 – 2010-01-04 15:11:34

假設底欄的高度是固定的它相當簡單。例如：

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #content { min-height: 100%; } 
     * html #content { height: 100%; } /* IE6 hack */ 
     #trailer { height: 2em; margin-top: -2em; background: yellow; } 
     #pad { height: 2em; } 
    </style> 
</head><body> 
    <div id="content"> 
     Content content content content content content content content content content content. 
     <div id="pad"></div> 
    </div> 
    <div id="trailer"> 
     Bit at the bottom. 
    </div> 
</body></html>

來源

2010-01-04 11:44:57 bobince

像這樣的事情就可以了，（注意對於一些padding-bottom額外的包裝的div，以確保頁腳不重疊的內容是必需的），

<html> 
<head> 
    <title>Sticky Footer Test</title> 

    <style> 
     html, body { 
      height: 100%; 
      padding: 0px; 
      margin: 0px; 
     } 

     * { 
      margin: 0px; 
     } 

     #container { 
      min-height: 100%; 
      height: auto !important; 
      height/**/: 100%; /* for IE6 */ 
      background: #ddd; 
     } 

     #footer { 
      position: relative; 
      background: #555; 
      margin-top: -100px; 
      height: 100px; 
     } 

     #content { 
      padding-bottom: 100px; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="content"> 
      <p>Hello! I'm some content!</p> 
     </div> 
    </div> 
    <div id="footer"> 
     <p>Hello! I'm a footer!</p> 
    </div> 
</body> 
</html>

來源

2010-01-04 11:52:40

回答

相關問題