0
我一直在嘗試使用各種技術來實現Ryan Fait的粘滯頁腳技術,但似乎沒有任何工作。當瀏覽器被垂直挑戰時,我的頁腳內容總是與我的主要內容重疊。這可能是因爲我有許多固定定位的DIV嵌套在頁腳中。當我將這些DIV包裝在父DIV(#footer)周圍時,此父DIV似乎甚至不會出現,我也不能將樣式應用於它以控制其位置(以及其內的內容)。粘滯頁腳的問題
HTML:
<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div><!-- Footer Area -->
</body>
CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -240px;
}
.footer, .push {
height: 240px;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: fixed;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: fixed;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: fixed;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: fixed;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
謝謝!
謝謝,但似乎問題並沒有被包含頁腳的粘性。相反,頁腳(#footer)的父DIV不是主動包含所有子DIVS(#print_blank,#logo,#nav_bar,#footerarea)。你能診斷CSS看看有什麼問題嗎? – 2013-05-07 01:10:38
除非您使用我提供的模板,否則您將遇到粘滯頁腳的問題。但爲了讓頁腳內容留在裏面,你需要賦予'footer' div'position:relative'給內部元素一個定位上下文。不要在頁腳內部元素上使用'position:fixed',因爲它們不會隨頁腳一起移動。要麼浮動它們,要麼賦予它們「display:inline-block」或給他們'位置:絕對'(如果你必須的話,儘管我更喜歡避免這種情況)。 – 2013-05-07 01:41:37
我感謝您的幫助,但這真的不適合我。我認爲我的CSS只是在所有各種DIVS上都搞砸了。 – 2013-05-07 02:22:55