6

我正在编写一个网页，该网页应该在顶部有一个页眉，在底部有一个页脚，在右侧有一个侧栏。我无法让页脚位于页面底部。我不希望它是 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>

正常工作：

正常工作

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

滚动不正确

4

4 回答 4

6

您需要更改position为fixed

于 2018-06-28T06:46:16.773 回答
3

有关如何执行此操作的示例，请参阅我的评论。

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

JSBin

它们的absolute位置页脚将位于relative定位的父级中，并将使用其空间，因此 putbottom:0会将页脚放在其 _parent 的底部。

具有不同位置的元素的一些示例

于 2013-07-27T20:31:56.390 回答
0

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

所做的更改： CSS

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

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

于 2013-07-27T20:21:16.627 回答
-2

这是JSBIN

请修改您的CSS如下

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

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

于 2013-07-27T20:25:34.270 回答