粘滞页脚的问题

我一直在尝试使用各种技术来实现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

粘滞页脚的问题

回答

相关问题