粘滯頁腳的問題

我一直在嘗試使用各種技術來實現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; 
}

謝謝！

來源

2013-05-07 MacGyver_97

這是一個更好的方式來做到這一點：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body {height: 100%; margin: 0; padding: 0;} 

* html #outer {/* ie6 and under only*/ 
    height:100%; 
} 

.wrapper { 
    min-height: 100%; 
    margin: -240px auto 0; 
} 

.content {padding-top: 240px;} 

.footer { 
    height: 240px; background: #F16924; 
} 

</style> 

</head> 
<body> 

<div class="wrapper"> 
    <div class="content">Juicy stuff goes here</div> 
    <div class="push"></div> 
<!-- end wrapper --></div> 
<div class="footer"></div> 

</body> 
</html>

粘頁腳的限制是頁腳必須保持在一定的高度。但只要你小心，你在那裏的元素不應該影響佈局。

編輯：這裏是一個與頁腳元素修訂模板包括：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body {height: 100%; margin: 0; padding: 0;} 

* html #outer {/* ie6 and under only*/ 
    height:100%; 
} 

.wrapper { 
    min-height: 100%; 
    margin: -240px auto 0; 
} 

.content {padding-top: 240px;} 

.footer { 
    height: 240px; background: #F16924; position: relative; 
} 

#print_blank { 
    padding-top: 0px; 
    bottom: 160px; 
    position: absolute;; 
    z-index: 11000; 
    width: 100% !important; 
    text-align: center; 
    min-width: 980px; 
} 
#logo { 
    width: 180px; 
    padding-top: 5px; 
    bottom: 86px; 
    position: absolute;; 
    z-index: 9999999; 
    left: 45px; 
} 
#nav_bar { 
    padding-top: 0px; 
    bottom: 77px; 
    position: absolute;; 
    z-index: 99999; 
    width: 100% !important; 
    text-align: center; 
    min-width: 980px; 
} 
#footerarea { 
    bottom: 0px; 
    position: absolute; 
    width: 100%; 
    padding-top: 20px; 
    background-color: #F16924; 
    height: auto; 
    text-align: justify; 
    min-width: 960px; 
    z-index: 999999; 
} 

</style> 

</head> 
<body> 

<div class="wrapper"> 
    <div class="content">Juicy stuff goes here</div> 
    <div class="push"></div> 
<!-- end wrapper --></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> 

</body> 
</html>

來源

2013-05-07 01:04:30

謝謝，但似乎問題並沒有被包含頁腳的粘性。相反，頁腳（＃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

粘滯頁腳的問題

回答

相關問題