Fatal编程技术网
  • css/
  • Css 粘性页脚的问题

Css 粘性页脚的问题

css

Css 粘性页脚的问题,css,footer,fixed,sticky-footer,overlapping,Css,Footer,Fixed,Sticky Footer,Overlapping,我一直在尝试各种技术来实现Ryan Fait的Sticky Footer技术，但似乎都不起作用。当浏览器受到垂直挑战时，我的页脚内容总是与我的主要内容重叠。这可能是因为我在页脚中嵌套了许多固定位置的div。当我将这些DIV环绕在父DIV（#footer）周围时，该父DIV似乎甚至不会出现，我也无法对其应用样式来控制其位置（以及其中的内容） HTML: <body> <div class="wrapper"> <div id="content"> Juicy s

我一直在尝试各种技术来实现Ryan Fait的Sticky Footer技术，但似乎都不起作用。当浏览器受到垂直挑战时，我的页脚内容总是与我的主要内容重叠。这可能是因为我在页脚中嵌套了许多固定位置的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>
谢谢

这是一种更好的方法：

<!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>


html，正文{高度：100%；边距：0；填充：0；}
*仅限html#外部{/*ie6及以下版本*/
身高：100%；
}
.包装纸{
最小高度：100%；
裕度：-240px自动0；
}
.content{padding top:240px；}
.页脚{
高度：240px；背景：#F16924；
}
多汁的东西在这里
粘性页脚的限制是页脚必须保持在固定高度。但是只要你小心，里面的元素不应该影响布局

编辑：这是一个修订版模板，其中包含页脚元素：

<!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>


html，正文{高度：100%；边距：0；填充：0；}
*仅限html#外部{/*ie6及以下版本*/
身高：100%；
}
.包装纸{
最小高度：100%；
裕度：-240px自动0；
}
.content{padding top:240px；}
.页脚{
高度：240px；背景：#F16924；位置：相对；
}
#打印空白{
填充顶部：0px；
底部：160px；
职位：绝对职位；；
z指数：11000；
宽度：100%！重要；
文本对齐：居中；
最小宽度：980px；
}
#标志{
宽度：180px；
垫面：5px；
底部：86px；
职位：绝对职位；；
z指数：999999；
左：45像素；
}
#导航栏{
填充顶部：0px；
底部：77px；
职位：绝对职位；；
z指数：99999；
宽度：100%！重要；
文本对齐：居中；
最小宽度：980px；
}
#页脚区域{
底部：0px；
位置：绝对位置；
宽度：100%；
填充顶部：20px；
背景色：#F16924；
高度：自动；
文本对齐：对齐；
最小宽度：960像素；
z指数：999999；
}
多汁的东西在这里
包含其他文本
谢谢，但问题似乎不在于页脚的粘性。相反，页脚的父DIV（#footer）并不主动包含所有子DIV（#print#u blank、#logo、#nav#u bar、#footer area）。你能诊断一下CSS看看出了什么问题吗？除非你使用我提供的模板，否则你的粘性页脚会有问题。但是为了让页脚内容留在其中，您需要给
footer
div
position:relative
给内部元素一个定位上下文。但是，不要在页脚内部元素上使用
position:fixed
，因为它们不会随页脚移动。要么浮动它们，要么给它们
display:inline block
，要么给它们
position:absolute
（如果必须的话，尽管我宁愿避免这样做）。我感谢你的帮助，但这对我来说真的不起作用。我认为我的CSS在我所有的div上都是乱七八糟的。好吧，我在上面添加了一个修改过的模板，其中包含了页脚元素。希望这能让事情变得更清楚。：-） 
<!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>