由于高度不能实现粘性页脚:100%问题

时间:2012-12-31 18:02:18

标签: html css height sticky-footer

我的网站看起来很适合long content的网页,但页脚会在short content页面上移动(编辑:链接现在显示正常的粘性页脚)。我已经尝试了多种解决方案,但我无法让它们中的任何一种工作(不在这里工作是页脚不粘,或者它出现在页面中间)。我已经尝试了this solutionthis one(我已经删除了两个解决方案,所以我可以重新开始)。例如,如果你进入chrome开发人员工具或firebug并将height:100%添加到#wrapper div(这实际上是使其工作的第一步),高度超过100%并且页脚不是在底部。

基本的div结构如下:

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div class="post"></div> <!-- floats left -->
      <div id="sidebar></div> <!-- floats right -->
      <div style="clear:both"></div> <!-- clear hack -->
    </div>
  </div>
</div>
<div id="footer"></div>

以下是相关div的CSS:

html {
    height: 100%;
}
body {
    min-width:900px;
    height: 100%;
}
#container {
    height: 100%;
    padding: 20px;
    background: #f4f4f4;
}
#content {
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    margin: auto;
    width: 80%;
    max-width: 1000px;
    min-width:800px;
    padding: 10px;
    background: white;
    -moz-box-shadow: 0px 2px 6px 3px #C0C0C0;
    -webkit-box-shadow: 0px 2px 6px 3px #C0C0C0;
    box-shadow: 0px 2px 6px 3px #C0C0C0;
}
#footer {
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    background: #101010;
    height: 14em;
    color: white;
}

/* These two are probably less important */
#sidebar {
    float: right;
    height: 100%;
    margin: 15px 25px;

    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 7px #000000;
    -webkit-box-shadow: 0px 0px 7px #000000;
    box-shadow: 0px 0px 7px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dcedeb');
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dcedeb')";
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    background-image: -moz-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -ms-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -o-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#dcedeb));
    background-image: -webkit-linear-gradient(top, #ffffff, #dcedeb);
    background-image: linear-gradient(top, #ffffff, #dcedeb);
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
}
.post {
    width: 100%;
    float: left;
    height: 100%;
}

任何人都可以使用像firebug或CDT这样的东西来弄清楚为什么100%的高度不起作用以及如何获得粘性页脚?

编辑:

按照@ajkochanowicz的描述实施Ryan Fait的解决方案之后,这就是页面的外观: enter image description here

你可以看到灰色背景(#container div的背景)没有延伸到#wrapper div的底部,即使它们都有height: 100%

2 个答案:

答案 0 :(得分:1)

目前尚不清楚你在这里使用哪种解决方案,所以很难告诉你你做错了什么。

但是,我在Ryan Fait's solution取得了成功,我在这里看不到任何代码。

如果您的网站开发不是太远,可以下载Kickstrap已经插入并已经开始工作的内容。

否则,您需要拥有此CSS

* { margin: 0; }
html, body { height: 100%; }
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}
#footer, #push { height: 142px; }

然后将#push div添加到您的标记中:

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div class="post"></div> <!-- floats left -->
      <div id="sidebar></div> <!-- floats right -->
      <div style="clear:both"></div> <!-- clear hack -->
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer"></div>

另外,请不要忘记编辑“142px”值以匹配所需的页脚高度。

修改 为了澄清固定页脚和粘性页脚之间的区别,这里有一个固定的页脚: http://jsfiddle.net/y48Su/

这是一个用Ryan Fait的解决方案实现的粘性页脚: http://jsfiddle.net/X6UB7/

答案 1 :(得分:-1)

你可以这样做:

body {height: auto; padding-bottom: 160px;}
#footer {position: fixed; bottom: 0;}