嘗試使頁腳粘到底部,內容自動居中在頁眉和頁腳之間。頁腳粘到底部,延伸到頁面外
目前使用這種技術:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
但我的頁腳出現遠低於並創建之間的巨大差距。
網站:Stingrayimages.ca
編輯:所以我設法頁腳粘在底部。但是,頁腳不在頁面的底部,會留下一些滾動條。而當縮小窗口時,頁腳不會停止內容的位置。
此外我不能讓內容div留在中間而不會搞亂一切。
嘗試使頁腳粘到底部,內容自動居中在頁眉和頁腳之間。頁腳粘到底部,延伸到頁面外
目前使用這種技術:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
但我的頁腳出現遠低於並創建之間的巨大差距。
網站:Stingrayimages.ca
編輯:所以我設法頁腳粘在底部。但是,頁腳不在頁面的底部,會留下一些滾動條。而當縮小窗口時,頁腳不會停止內容的位置。
此外我不能讓內容div留在中間而不會搞亂一切。
如果您使用與鏈接相同的技術,則缺少在頁腳處的位置。
而且還與你鏈接的例子,看結構:
<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>
你的div容器應該包裝你的頭股利。我認爲你錯誤地認爲Ryan的頭部區域是設計師常用的頁面標題,實際上在這個例子中它就是html的頭部元素。底部的額外空間可能等於頭部div的高度。
在粘腳,請記住,容器包裹所有的身體內容,但頁腳。
但即時嘗試保持內容中心之間的頭部和頁腳。容器有一個寬度,但頭部需要有一個連續的寬度,如你所見。 – 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
這不行!頁腳必須放在容器外面才能使用此解決方案。 – 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