Question

我正在编写一个网页，其顶部应有一个标题，底部有一个页脚，右侧有一个侧栏。我在将页脚放在页面底部时遇到了麻烦。我不希望它是位置：固定（这会让人烦恼），但我确实希望它一直向下滚动时出现在页面底部。（如果不需要滚动，它应该出现在窗口的底部）

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

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

正常工作：

working correctly

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

working incorrectly with scroll

Answer 1

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

但在你的情况下，只需将position:relative放在身上。

JSBin

absolute位置页脚将位于relative定位父中，并将使用其空格，因此请bottom:0将页脚放在_parent的底部。

一些examples of elements with different positions

Answer 2

这是JSBIN

请修改 CSS ，如下所示

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

从bottom: 0;

中删除#footer{..}

Answer 3

嘿，我用你的代码做了一个小提琴。从我的理解这是你正在寻找的。如果这有帮助，请告诉我。

完成的更改：的 CSS

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

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

Answer 4

您需要将position更改为fixed

滚动时页脚不会粘到页面底部

4 个答案: