0

我看过以前的 SO 帖子和 tuts，但我自己的代码没有任何运气。我的页脚不会粘在页面底部（不是窗口）。我不希望内容在我的页脚中滚动。页面大小的长度差异很大，并且希望始终在底部有一个页脚。

leftcol、rightcol 和 footer 都在容器中。任何帮助都是极好的。

我的 HTML 结构如下：

<body>
 <div id = "container">
  <div id = "leftcol">
      <h2></h2>
       </p>
  </div>
  <div id = "rightcol">
      <h2></h2>
      </p>
   </div>
   <div id ="footer">
       <p>...........</p>
   </div>
 </div>
</body>

这是我的CSS：

body {
    font-family: 'Rokkitt', Georgia, serif;
    font-size: 16px;
    background-color: #FFFFFF;
    line-height: 1.3em;
    height: auto;
    color: #252525;
    }

#container {
    display: block;
    width: 1024px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    }

#leftcol {
    display: block;
    float: left;
    margin: 20px 5px 5px 15px;
    width: 660px;
    position: absolute;
    height: auto;
    padding-bottom: 20px;
    }

#rightcol {
    display: block;
    float: right;
    margin: 30px 5px 5px 780px;
    position: absolute;
    width: 275px;
    height: auto;
    }

#footer {
    position: fixed;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
4

4 回答 4

2

This is the BEST solution out there

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

于 2012-10-15T13:11:22.517 回答
2

您需要将页脚移到容器元素和正文元素之外并使用位置：绝对；和底部：0；始终将其固定到 html 元素的底部。

我说在 body 之外，虽然 body 标记主要占用 html 元素的高度，但在某些版本的 IE 中情况并非如此。由于您尚未粘贴 HTML，我显然无法向您显示修改后的 html，但您的 css 应该如下所示：

#footer {
    position: absolute;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
于 2012-10-15T13:23:28.953 回答
2

你看了吗？

http://www.cssstickyfooter.com/

这对我有用

于 2012-10-15T12:54:31.370 回答
1

检查这个小提琴：http: //jsfiddle.net/9Wy8G/13/

这是你想要的吗？

更新：
检查这个 SO 帖子。您可能会发现它很有用。

于 2012-10-15T13:13:30.623 回答