HTML/CSS 页脚问题答案

【问题标题】：HTML/CSS Footer troublesHTML/CSS 页脚问题
【发布时间】：2012-10-15 21:27:15
【问题描述】：

我查看过以前的 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;
    }

【问题讨论】：

向我们展示一些 HTML 代码并制作一个 jsfiddle 示例
同意，不清楚你想要什么，出了什么问题……
我添加了基本的 HTML 结构
当我尝试其他 jsfiddle ex 和其他方法时，它似乎忽略了我浮动的 leftcol 和 rightcol。可能与这两个元素有关？

标签： html css footer

【解决方案1】：

您需要将页脚移到容器元素和主体元素之外，并使用 position:absolute;和底部：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;
    }

【讨论】：

除非我做错了什么，否则将 #footer 移到正文之外仍然只会将其设置到屏幕底部，而不是显示内容的高度。
它将它设置为body标签的高度，它会随着内容的扩展而扩展，所以当内容对于视口来说太小时，它总是会出现在它的底部，当内容大于视口，那么它会按照您的预期进行并且仍然位于内容下方（并且不会通过固定在窗口底部的位置来覆盖内容）。
啊，我明白了。我让它工作。我添加了一个粘性导航（顶部菜单），它导致我的 leftcol 在滚动后跳转。所以当我相对定位它时，它把我的页脚扔掉了（这导致了这个线程）。经过其他一些调整后，将其从体内取出修复。谢谢@JamieM23！

【解决方案2】：

你看了吗？

http://www.cssstickyfooter.com/

这对我有用

【讨论】：

这个貌似可行，我试试看是否可行

【解决方案3】：

这是最好的解决方案

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

【讨论】：

【解决方案4】：

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

这是你想要的吗？

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

【讨论】：

这个会粘到底部，但是如果内容需要滚动的话会重叠。