頁腳不停留在頁面底部

我得到我的頁腳留在頁面底部here，但我做了一些事情，不知道是什麼，現在它在內容下面。我試着改變包裝的最小高度值，但它沒有做到這一點。頁腳不停留在頁面底部

頁腳代碼：

<div id='footer'>&copy; Copyright 2013 Austen Patterson. All Rights Reserved.</div> 

</body> 
</html>

頁腳風格：

#footer { 
margin-right: 10%; 
min-width: 100%; 
color: #4bb3e6; 
text-align: right; 
}

車身/包裝風格：

body { 
    background:url("http://pattersoncode.ca/incls/pw_pattern.png"); 
    color: black; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana, sans-serif"; 
    min-width: 94%; 
    min-height: 95%; 
    font-family: 'Muli', sans-serif; 
} 
#wrapper { 

    animation: fadein 2s; 
    -moz-animation: fadein 0.25s; 
    -webkit-animation: fadein 0.25s; 
    -o-animation: fadein 0.25s; 
    min-width: 100%; 
    min-height: 95%; 

}

來源

2013-07-06 Austen

嘗試增加：

position:absolute; 
bottom: 0;

到頁腳選擇器。

來源

2013-07-06 04:51:36

天才！謝謝：D不知道它爲什麼會移動，但很高興你幫我修復它<3 – Austen

這是不好的，如果內容超過視口，它會失敗..更好地看看Ryan Fait的Sticky Footer –

-1

嗯，也許這是因爲你有95％的最低身高。如果不是，您可以嘗試：

#footer { 
position: absolute; 
bottom: 0; 
margin: 0 auto; 
}

來源

2013-07-06 04:52:39 user2421594

使用position: absolute時要小心。截至編寫之時，當頁面上的內容太多（滾動條的內容足夠多）時，頁面會中斷。我假設你總是希望頁腳在內容下面。

爲了確保你的身體的min-height造型作品，添加：

html { height: 100% }

此外，爲了確保您的頁腳總是出現下面的內容中，添加

body { 
    margin: 0; //remove default margin. you may not need 
       //this, but it will prevent problems with 
       //the body being too big 
    min-height: 100%; 
    box-sizing: border-box; //making sure padding works with 100% sizing. 
    padding-bottom: 40px; //just enough for your footer 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
}

這將刪除你的頁腳從頁面的流程，但這沒關係，因爲我們已經在頁面的底部爲它分配了40px的空間。

來源

2013-07-06 05:05:10 uber5001

試試這個

#footer { 
    background: none repeat scroll 0 0 transparent; 
    color: #4BB3E6; 
    position: fixed; 
    text-align: right; 
    width: 100%; 
}

來源

2013-07-06 05:26:03

使用positon:fixed，DEMO http://jsfiddle.net/VDfcC/

#footer { 
    position:fixed; 
    left:0; 
    bottom:0; 
    z-index:10; 
    margin-right: 10%; 
    min-width: 100%; 
    color: #4bb3e6; 
    text-align: right; 
}

來源

2013-07-06 05:33:55 yeyene

頁腳不停留在頁面底部

回答

相關問題