css - CSS Sticky Footer 实现的问题

Question

我在让 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

score 5 · Accepted Answer

您的 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>

score 1 · Accepted Answer

无需修改现有样式（或使用 CSS Sticky Footer），我只需重做它就容易多了。所以这里是：

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

基本上负边距应该与页脚的高度相匹配，高度 100% 需要应用于 html/body，并且应该声明相对位置。

同样在参考 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>

score 0 · Accepted Answer

我不确定当内容实际上比您的页面高度长时，Sticky Footer 意味着什么......如果它应该在您滚动时浮动在文本上，那么我将使用 Javascript 来计算底部坐标并放置页脚在固定位置的新层上。这也可以变得非常跨浏览器友好......

score 0 · Accepted Answer

能够单独使用 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%; }

score 0 · Accepted Answer

在这里你可以找到一些代码如下

将以下几行 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 - CSS Sticky Footer 实现的问题

5 回答 5

Related

Reference