问题的CSS置顶页脚的实现问题的CSS置顶页脚的实现(Problem with CSS Sticky

2019-06-02 15:00发布

站内文章 / 前沿技术

29 0

男人必须洒脱

女 | 书童

私信

林有一些问题得到置顶页脚在我的网站工作。如果内容超过了窗口小页脚应该留在窗口的底部和死空间应该与一个div被填满。我认为， CSS粘滞页脚做到这一点，但我不能让“推格”工作推内容一路下滑。正如你可以看到我的代码不只是身体的包装英尺。

<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粘滞页脚代码应该在我的情况去。

编辑，继承人我得到了什么，什么我想要做的：替代文字http://bayimg.com/image/gacniaacf.jpg

Answer 1:

你的HTML是一点点奇怪。例如，为什么banner-bg包裹周围的一切？

这就是说，为了使用粘性页脚技术，你需要的一切，但页脚整合成一个单一的DIV。所以，你<body>标签将只包含两个顶级的DIV - wrapper和footer 。所有你目前拥有的东西会去那个包装DIV里面。

需要注意的是粘页脚可能不适合你的工作，如果你使用的背景图片包括透明区域，因为它依赖于wrapper的背景被覆盖的头。

更新：好吧，这里的作品版本。 “粘性页脚”样式表摘自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>

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

基本上负余量应匹配页脚，高度需要被施加到的HTML /体100％的高度，和相对位置应当声明。

此外，在参照的xHTML，请注意“页脚”分区是如何不INSIDE“容器” DIV，而是其外部（以便有2个独立的容器状的div，容器和页脚）。

如果您仍有问题，请与您的标记中的主要问题之一是：

100％的高度需要被宣布为HTML和body标签。
阴性切缘缺少在容器DIV这是＃旗帜-BG
如果页脚是像素，高100，＃旗帜-BG应该有边距：-100px

位置需要是相对的两个＃旗帜-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>

Answer 3:

我不知道是什么置顶页脚的意思做，当内容实际上长于你的页面高度...如果它应该是浮在文字上，而你正在滚动的话，我会使用Javascript来计算底部坐标，并把页脚上在固定位置的新层。这可能是取得了相当的跨浏览器的友好，以及...

Answer 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%; }

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

文章来源: Problem with CSS Sticky Footer implementation

标签： css footer

男人必须洒脱

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~