CSS Sticky Footer实现的问题

Question

CSS Sticky Footer实现的问题

我有一些问题让Sticky Footer在我的网站上工作.如果内容小于窗口,则页脚应保留在窗口的底部,并且应使用div填充死区.我认为CSS Sticky Footer可以做到这一点,但我不能让"推送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;
}

Run Code Online (Sandbox Code Playgroud)

我很困惑CSS Sticky Footer-code应该放在我的情况下.

编辑,继承人我得到了什么以及我想做什么: 替代文字http://bayimg.com/image/gacniaacf.jpg

Answer 1

Chs*_*y76 5

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，7 月前
查看次数：	9834 次
最近记录：	12 年，7 月前