如果我沒有太多的內容，如何讓頁面底部的頁腳，但我不想粘頁腳

有兩種情況我的內容如果我沒有太多的內容，如何讓頁面底部的頁腳，但我不想粘頁腳

1）我沒有太多內容，所以我想頁腳底部的頁腳。

2）我有很多的內容，我想要所有的內容後頁腳（即不粘頁腳）。

我試過用CSS，但我想因爲我有一些圖像和文字浮動，我無法讓它工作。

我可以使用javascript修復頁腳問題嗎？

來源

2013-06-24 steve

http://css-tricks.com/snippets/css/sticky-footer/ – mishik

添加片段與嘗試，請。 –

你所解釋的通常被稱爲「粘性」頁腳（也許你正在將它與「固定」頁腳混淆） – xec

這是同類產品中最強大的（並且非常簡單）頁腳我遇到：

http://ryanfait.com/sticky-footer/

在不同的項目中成功地使用 - 測試下降到IE6，並在所有現代瀏覽器獨立工作的所有其他內容。

來源

2013-06-24 07:49:33

+1 - 也可以查看http://www.cssstickyfooter.com/ – xec

謝謝，工作完美。只需做一些小的改變，如最小高度：85％;並使其8em而不是4em，但代碼完美。 – steve

對頁面內容使用min-height。如果沒有很多更改，它將只能在正常的屏幕分辨率下工作（因爲您將在px中指定min-height），但通常只需將頁腳向下推至正常的數量，而像素爲min-height就是完美的。

來源

2013-06-24 07:49:19

試試這個

CSS

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

.wrapper{ 
    min-height:100%; 
    position:relative; 
} 

.container{ 
    width:960px; 
    margin:0 auto; 
    padding-bottom:100px; 
} 

.header{ 
    height:100px; 
    background-color:#066; 
} 

.footer{ 
    position:absolute; 
    bottom:0; 
    height:100px; 
    background-color:#006; 
    width:100%; 
}

HTML

<div class="wrapper"> 
    <div class="container"> 

     <div class="header"> 
      Header 
     </div> 

     <div class="body"> 

     </div> 


    </div> 

    <div class="footer"> 
     Footer 
    </div> 

</div>

jsFiddle File

來源

2013-06-24 07:54:38

我想這是最簡單的辦法：

HTML：

<html> 
<body> 
    <div id="header"> 
    </div> 

    <div id="content">   
    </div> 

    <div id="footer"> 
    </div> 
</body> 
</html>

CSS

html,body{ 
    width:100%; 
    height:100%; 
} 
#header{ 
    height:100px; 
    background-color:#00ff00; 
    width:100%; 
} 

#content{ 
width:100%; 
border:1px solid red; 
min-height:calc(100% - 200px); 
min-height:-moz-calc(100% - 200px); 
min-height:-webkit-calc(100% - 200px); 
min-height:-o-calc(100% - 200px); 
} 

#footer{ 
    height:100px; 
    background-color:#0000ff; 
    width:100%; 
}

來源

2013-06-24 09:28:44

如果我沒有太多的內容，如何讓頁面底部的頁腳，但我不想粘頁腳

回答

相關問題