在頁面底部或文本下方固定頁腳

我想在我的網站上製作一個粘性頁腳。它必須位於頁面底部，或者當添加更多文本時，它必須位於文本下方。我已經看了一些其他的問題，但我似乎無法與這些答案修復它在頁面底部或文本下方固定頁腳

HTML：

<body> 
    <div id="header"> 
     This is the header 
     <hr> 
    </div> 

    <div id="menu"> 
     <br> 
     <b>Menu</b><br> 
     <ul> 
      <li>item 1</li> 
      <li>item 2</li> 
      <li>item 3</li> 
     </ul> 
     <br> 
    </div> 
    <div id="body"> 
     <p> body </p> 
     <p> body </p> 
     <p> body </p> 
     <p> body </p> 
     <p> end </p> 
    </div> 
</body> 
<footer> 
    Footer 
</footer>

CSS：

html, body { 
    height:   100%; 
    background:  #E6E6E6; 
    margin:   0; 
    padding:  0; 
} 

#header { 
    text-align:  center; 
    height:   50px; 
    position:  static; 
    top:   0px; 
    z-index:  15; 
    background:  #B2B2B2; 
} 

#body{ 
    text-align:  left; 
    margin-left: 210px; 
    margin-right: 200px; 
    margin-bottom: 5px; 
    background:  #B2B2B2; 
} 

#menu { 
    width:   200px; 
    text-align:  left; 
    left:   0px; 
    position:  absolute; 
    background:  #B2B2B2; 
} 

footer { 
    text-align:  center; 
    height:   30px; 
    position:  relative; 
    bottom:   0; 
    width:   100%; 
    background:  #B2B2B2; 
}

它可能會是一些愚蠢的，但我不知道它...

提前致謝！

來源

2014-01-20 Fingashpitzzz

您有沒有機會看** Ryan Fait的[粘滯頁腳]（http://css-tricks.com/snippets/css/sticky-footer/）**？ –

檢查我的答案在這裏：[http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-the-page/20370880#20370880](http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-page/20370880＃20370880） – Ruddy

以下鏈接可能會幫助您解決此問題。 [頁腳CSS位置] [1] [1]：http://stackoverflow.com/questions/21155833/footer-position-issue-css/21156261#21156261 –

我發現了一種解決方案。我添加/更改了以下幾行：

#body{ 
    min-height: 83%; 
} 

footer{ 
    position: static; 
}

感謝大家的幫助！

來源

2014-01-21 09:16:56 Fingashpitzzz

您可能想參考下面的內容。

body{ 
    margin:0px; 
    background:#000; 
} 
.footer-cont { 
    width:100%; 
    position:fixed; 
    bottom:0px; 
} 
.footer { 
    height:50px; 
    background:#F0F0F0; 
    border:1px solid #CCC; 
    width:960px; 
    margin:0px auto; 
} 
.content { 
    width:960px; 
    background: #F0F0F0; 
    border: 1px solid #CCC; 
    height: 2000px; 
    margin: 70px auto; 
}

來源

2014-01-20 13:37:48

在頁面底部或文本下方固定頁腳

回答

相關問題