Question

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

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

Answer 1

你看了吗？

http://www.cssstickyfooter.com/

这对我有用

Answer 2

这是最好的解决方案

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

Answer 3

你需要将你的页脚移动到容器元素和body元素之外并使用position：absolute;和底部：0;始终将其固定在html元素的底部。

我说身体外面，虽然主体标签占据了html元素的高度，但有一些版本的IE，其中并非如此。由于你没有粘贴你的HTML，我显然无法向你展示修改后的HTML，但你的css应该是这样的：

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

Answer 4

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

这是你想要的吗？

<强>更新
检查this SO post。您可能会发现它很有用。

HTML / CSS页脚问题

4 个答案: