0

我的网站对于内容长的页面看起来不错，但页脚在内容短的页面上向上移动（编辑：链接现在显示工作正确的粘性页脚）。我已经尝试了多种解决方案，但我无法让它们中的任何一个起作用（在这里不起作用是页脚不粘，或者它出现在页面中间）。我已经尝试过这个解决方案和这个解决方案（我已经删除了两个解决方案，所以我可以重新开始）。例如，如果您进入 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%;
}

任何人都可以使用诸如萤火虫或 CDT 之类的东西来弄清楚为什么 100% 的高度不起作用以及如何获得粘性页脚？

编辑：

在按照@ajkochanowicz 的描述实施 Ryan Fait 的解决方案后，页面如下所示： 在此处输入图像描述

您可以看到灰色背景（即 #container div 的背景）没有延伸到 #wrapper div 的底部，即使两者都有height: 100%.

4

2 回答 2

1

目前尚不清楚您在这里使用的是哪种解决方案，因此很难告诉您您做错了什么。

但是，我在Ryan Fait 的解决方案上取得了成功，我在这里看不到任何代码。

如果您对网站开发不太了解，您可以下载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; }

然后将#pushdiv 添加到您的标记中，如下所示：

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

于 2012-12-31T18:13:29.077 回答
-1

你可以这样做：

body {height: auto; padding-bottom: 160px;}
#footer {position: fixed; bottom: 0;}
于 2012-12-31T18:09:47.547 回答