頁腳粘到底部，延伸到頁面外

嘗試使頁腳粘到底部，內容自動居中在頁眉和頁腳之間。頁腳粘到底部，延伸到頁面外

目前使用這種技術：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

但我的頁腳出現遠低於並創建之間的巨大差距。

網站：Stingrayimages.ca

編輯：所以我設法頁腳粘在底部。但是，頁腳不在頁面的底部，會留下一些滾動條。而當縮小窗口時，頁腳不會停止內容的位置。

此外我不能讓內容div留在中間而不會搞亂一切。

來源

2011-04-14 Art

-1

如果您使用與鏈接相同的技術，則缺少在頁腳處的位置。

而且還與你鏈接的例子，看結構：

<style type="text/css"> 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 
</style> 
<div class="wrapper"> 
    <div class="header"></div> 
    <div class="push"></div> 
</div> 
<div class="footer"></div>

但我寧願像這樣的東西去：

<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

div#container { 
    position: relative; 
    margin: 0 auto; 
    height: auto !important; 
    height: 100%; /* IE6: min-height*/ 
    min-height: 100%; 
} 

div#header { 

} 

div#content { 
    padding: 1em 1em 5em; 
} 

div#footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
} 
</style> 
<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

來源

2011-04-14 17:13:03 Jafu

這不行！頁腳必須放在容器外面才能使用此解決方案。 – bpeterson76 2011-04-14 17:56:41

你錯了。看到我的例子在這裏：http://jsfiddle.net/xgZgd/ – Jafu 2011-04-14 18:30:01

不完全。粘性頁腳的原則之一是在頁眉和頁腳之間填充中心「內容」區域。你的內容隨着內容的增長而增長，但並未填滿。因此，如果用戶試圖在內容區域重複背景，那麼只能達到內容的範圍。粘腳的天才是它不使用絕對定位。 – bpeterson76 2011-04-14 18:59:43

你的div容器應該包裝你的頭股利。我認爲你錯誤地認爲Ryan的頭部區域是設計師常用的頁面標題，實際上在這個例子中它就是html的頭部元素。底部的額外空間可能等於頭部div的高度。

在粘腳，請記住，容器包裹所有的身體內容，但頁腳。

來源

2011-04-14 17:22:39 bpeterson76

但即時嘗試保持內容中心之間的頭部和頁腳。容器有一個寬度，但頭部需要有一個連續的寬度，如你所見。 – Art 2011-04-14 18:02:28

問題是，爲了CSS能夠做垂直對齊，它必須有一個已知的父高度。例如，您可以在vertical-align：center中放置一個500px的父div，並在其中放置一個div div，它將以250爲中心。但是，在此示例中，您的容器div永遠不會成爲定義的高度，因爲它因屏幕而異。所以，在粘腳上做完美的垂直定位不會發生。你可以將它改裝成大多數屏幕，但在這裏完美並不是一種選擇。這不是解決方案的目的，只需將腳粘到底部即可。 – bpeterson76 2011-04-14 18:08:09

好了，現在把頭放在容器內。我不知道爲什麼頁腳仍然超出頁面。現在我將如何將內容div居中？ – Art 2011-04-14 18:24:32

頁腳粘到底部，延伸到頁面外

回答

相關問題