將頁腳保持在頁面底部

Question

當我使用bottom:0; 如果我沒有足夠的內容，則頁腳應該是應該的位置，但如果我有內容，用戶必須在頁面上滾動，頁腳保持在原位，一旦滾動，頁腳就在屏幕的中間。

當我不使用bottom:0; 我確實有填充屏幕的內容，頁腳應該在哪里，但如果我沒有足夠的內容，則頁腳不應該位於頁面中間的某個位置。

它們都有效但只有在滿足某些條件時才有效。 如何將它始終放在底部應該是內容還是沒有？

.footer{
    background-color:#99C;
    background-repeat: repeat;
    width:100%;
    position:absolute;
    bottom:0;
}

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

Answer 1

在這里，試試這個網站，它解釋了如何做到這一點。

還有一個例子

HTML：

<html>
    <head></head>
    <body>
        <div id="container">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
    </body>
</html>

CSS：

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

div#container {
    position:relative;
    margin:0 auto;
    width:750px;
    height:auto !important;
    height:100%;
    min-height:100%;
}

div#header {
    height:150px;
    background-color:red;
}

div#content {
    padding-bottom:150px;
    height:800px;
    background-color:green;
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:150px;
    background-color:blue;
}

JSFiddle： http ： //jsfiddle.net/gdy8K/

請注意，＃ #header和#content高度只是為了使div使用一些空間。 #footer空間雖然是必要的，但應與#content padding-bottom匹配。 background-color也只是為了演示。

您還應該注意，如果您使用的是asp.net，請不要忘記您的內容通常位於form標簽中。 你必須在第一個css規則中添加form ，就像這樣

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

將頁腳保持在頁面底部

問題描述

1 個解決方案

解決方案1
4 2012-08-14 20:55:11

將頁腳保持在頁面底部

問題描述

1 個解決方案

解決方案1 4 2012-08-14 20:55:11

解決方案1
4 2012-08-14 20:55:11