滚动时页脚不粘在页面底部

Question

我正在编写一个网页，该网页应该在顶部有一个页眉，在底部有一个页脚，在右侧有一个侧栏。我无法让页脚位于页面底部。我不希望它是 position: fixed （这会很烦人），但我确实希望它在您一直向下滚动时出现在页面底部。 （在不需要滚动的情况下，应该出现在窗口底部）

这是我正在使用的。可能有一个非常简单的修复，但我不明白它是什么。复制/粘贴这个，你会看到的。

<html>
  <head>
    <style type="text/css">
      body {
        font-size: 200%;
      }

      #side {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #0A0;
        z-index: 100;
      }

      #header {
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #A00;
        z-index: 200;
      }

      #header_push {
        clear: both;
        height: 40px;
      }

      #footer {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #00A;
        z-index: 150;
      }

      #footer_push {
        clear: both;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      HEADER
    </div>
    <div id="header_push"></div>
    <div id="content">
      <h1>Content</h1>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    </div>
    <div id="side">
      SIDE COLUMN
    </div>
    <div id="footer_push"></div>
    <div id="footer">
      FOOTER
    </div>
  </body>

正常工作：

向下滚动时工作不正确（参见页面一侧的滚动条）：

Answer 1

您需要将position 更改为fixed

Answer 2

请参阅我的评论，了解如何执行此操作的 example。

但在您的情况下，只需将position:relative 放在身体上即可。

JSBin

absolute 位置 footer 将位于 relative 定位 parent 中并将使用其空间，因此放置 bottom:0 将放置 _parent 底部的页脚。

一些examples of elements with different positions

Answer 3

嘿，我用你的代码做了一个小提琴。据我了解，这就是您要寻找的。让我知道这是否有帮助。

所做的更改： CSS

#footer {
    height: 50px;
    background-color: #00A;
    z-index: 150;
  }

小提琴链接：http://jsfiddle.net/daltonpereira/q7Dqg/

Answer 4

这里是JSBIN

请修改你的CSS如下

#footer {
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #00A;
  z-index: 150;
}

从#footer{..} 中删除bottom: 0;