CSS Sticky Footer 实现的问题
Posted
技术标签:
【中文标题】CSS Sticky Footer 实现的问题【英文标题】：Problem with CSS Sticky Footer implementation 【发布时间】：2010-11-09 20:53:46 【问题描述】：我在让 Sticky Footer 在我的网站上工作时遇到了一些问题。如果内容小于窗口，页脚应该留在窗口的底部，死区应该用 div 填充。我认为CSS Sticky Footer 可以做到这一点，但我无法让“push div”工作将内容一直向下推。如您所见，我的代码不仅仅是 body-wrapper-footer。
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
#banner-bg
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
#wrapper
width: 84em;
margin-left: auto;
margin-right: auto;
#header-bg
height: 16em;
background-image: url("Images/header/header-bg.png");
#content-bg
background-image: url("Images/img3.png"); background-repeat: repeat-y;
#content
margin-right: 2em;
margin-left: 2em;
我对 CSS Sticky Footer-code 在我的情况下应该去哪里感到困惑。
编辑，这是我得到的和我想做的： alt text http://bayimg.com/image/gacniaacf.jpg
【问题讨论】：
CSS Sticky Footer 在 FF3 或 IE8 中对我不起作用。也许这就是问题的一部分。 我已更新我的答案以包含您的布局的实际代码示例。在 IE8 和 FF2.5 中工作正常 【参考方案1】：您的 html 有点奇怪。例如，为什么banner-bg 环绕一切？
也就是说，为了使用 Sticky Footer 技术，您需要将 除页脚之外的所有内容 包装到单个 DIV 中。因此，您的 <body> 标签将只包含两个*** DIV - wrapper 和 footer。您当前拥有的所有东西都将放入该包装器 DIV 中。
请注意，如果您使用的背景图像包含透明区域，则粘性页脚可能不适合您，因为它依赖于 wrapper 背景被页眉覆盖。
更新：好的，这是可以使用的版本。 “Sticky Footer”样式表取自cssstickyfooter.com，应该适用于所有现代浏览器。我已经稍微简化了你的 HTML（不需要根据你的图片单独的背景层），但你可以随意修改它，只要你保持基本结构到位。此外，由于我没有您的图片，因此出于说明目的添加了纯色背景颜色，您需要将其删除。
<html>
<head>
<style>
* margin: 0; padding: 0
html, body, #wrap height: 100%
body > #wrap height: auto; min-height: 100%
#main padding-bottom: 100px /* must be same height as the footer */
#footer position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
/* CLEAR FIX*/
.clearfix:after content: "."; display: block; height: 0; clear: both; visibility: hidden
.clearfix display: inline-block
/* Hides from IE-mac \*/
* html .clearfix height: 1%
.clearfix display: block
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
div#banner
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
div#wrap
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
div#header
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
div#footer
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
【讨论】：
banner-bg 需要覆盖 100% 的屏幕（宽度），并且站点的其余部分（包装器内）应该只覆盖固定宽度并在窗口中居中。我想不出任何其他方法来做到这一点。这就是我所拥有和想要的：img43.imageshack.us/img43/5470/sitestructure.png 感谢您的更新，这几天我将无法测试，但我会在测试时回信。如果它有效，你就是最好的:) 对不起，我没有回答，我整个夏天都在休息。我对您的代码进行了一些修改，现在它可以工作了 - div 结构必须做得有点难看，但它可以工作。谢谢一百万。 @mdc，你最后是怎么让它工作的？我正在寻找与您基本相同问题的解决方案。您愿意分享您的解决方案吗？或者，如果更简单，我可以查看您的网站并亲自查看您的 CSS 的域。【参考方案2】：与其修改现有样式（或使用 CSS 粘滞页脚），不如重做它更容易。所以这里是：
<html>
<head>
<style type="text/css">
html, body
height: 100%;
#container
height: 100%;
margin: 0 0 -200px 0;
position: relative;
#footer
position: relative;
height: 200px;
</style>
</head>
<body>
<div id="container">
<div id="header">Oh Beautiful Header</div>
<div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>
基本上负边距应该和footer的高度相匹配，需要对html/body应用高度100%，并声明相对位置。
同样参考 xHTML，请注意“页脚” div 不是在“容器” div 内部，而是在它外部（因此有 2 个独立的类似容器的 div，容器和页脚）。
如果您仍然遇到问题，您的标记的主要问题是：
需要为html和body标签声明100%的高度。 #banner-bg 容器 div 上缺少负边距 如果页脚是 100px 高，#banner-bg 应该有 margin-bottom: -100px#banner-bg 和 #footer 的位置必须是相对的
html 高度：100%;
body
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
height: 100%;
#banner-bg
width: 100%;
height: 100%;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: relative;
margin: 0 0 -200px 0;
#wrapper
width: 84em;
margin-left: auto;
margin-right: auto;
#header-bg
height: 16em;
background-image: url("Images/header/header-bg.png");
#content-bg
background-image: url("Images/img3.png"); background-repeat: repeat-y;
#content
margin-right: 2em;
margin-left: 2em;
#footer
position: relative;
height: 200px;
其他：
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
<div id="footer">
Footer Content
</div>
</body>
</html>
【讨论】：
首先，您的代码不起作用（至少，它缺少html 的height: 100% 声明）。其次，最初的问题包括一个指向一个页面的链接，该页面准确描述了如何实现粘性页脚 - mdc 正在询问如何将其应用于 他的 场景。
是的，没错，ChssPly76。我刚刚添加了一张图片来说明我必须使用的内容。
ChssPly76，你是对的！我不小心遗漏了样式中的 html 标签（匆忙输入）。总是很好地确保继承的样式适用！另外，我省略了 min-height （IE6 无法识别），但我会添加它以确保无论内容很少或没有内容，页脚都保持在底部。
我仍然无法让它工作，如果我按照您的代码执行此操作，页脚会与包装 div 重叠，并且它不在屏幕底部。你们看看我发布的图片，是否可以用背景图片填充空白区域？因为如果它不是在试图让页脚停留在底部没有多大用处。【参考方案3】：
当内容实际上比您的页面高度长时，我不确定 Sticky Footer 意味着什么... 如果它应该在您滚动时浮动在文本上，那么我将使用 javascript 计算底部坐标并将页脚放置在固定位置的新图层上。这也可以使跨浏览器非常友好...
【讨论】：
或者做facebook对他们的状态栏所做的事情——它固定在屏幕的底部，不需要javascript。【参考方案4】：能够单独使用 CSS 和 HTML 实现粘性页脚非常棒，但我不喜欢调整我的标记/文档结构以进行装饰。
我更喜欢 JavaScript 方法，没有优雅的降级。如果没有 JS，则没有粘性页脚。我一般用jQuery来实现：
jQuery
$(window).resize(function()
if ($('body').height() < $(window).height())
$('#footer').addClass('fixed');
else
$('#footer').removeClass('fixed');
).resize();
CSS
#footer.fixed position: fixed; bottom: 0; width: 100%;
【讨论】：
【参考方案5】：在这里你可以找到一些代码如下
将以下几行 CSS 添加到您的样式表中。 .wrapper 中边距的负值与 .footer 和 .push 的高度相同。负边距应始终等于页脚的整个高度（包括您可能添加的任何填充或边框）。
在 CSS 中：
height: 100%;
.wrapper
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
.footer, .push
height: 4em;
遵循这个 HTML 结构。任何内容都不能位于 .wrapper 和 .footer div 标签之外，除非它是绝对使用 CSS 定位的。 .push div 中也不应该有任何内容，因为它是一个隐藏元素，可以“下推”页脚，因此它不会与任何内容重叠。
在 HTML 正文中：
您的网站内容在这里。
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
【讨论】：
以上是关于CSS Sticky Footer 实现的问题的主要内容，如果未能解决你的问题，请参考以下文章
css Sticky footer html5（http://ryanfait.com/html5-sticky-footer/）