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

标签 html css css-position absolute

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

正常工作:

working correctly

向下滚动时不正确(请参阅页面侧面的滚动条):

working incorrectly with scroll

最佳答案

您需要将 position 更改为 fixed

关于html - 滚动时页脚不粘在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17902057/

相关文章:

html - 滚动条只在一个 div 而不是整个 body

javascript - 如何在没有滚动的情况下使div的高度和宽度以特定的边距全屏显示

html - 带有 imgs 的 Bootstrap 方形瓷砖

javascript - scrollToFixed - 奇怪的滚动问题

asp.net - CSS绝对定位不起作用

html - CSS 箭头不透明度过渡

javascript - 如何在确认密码的工具提示中显示错误消息?

javascript - 侧边栏高度随内容长度变化

css - 媒体查询在移动设备上不受尊重?

CSS Div within Div full width and full height,相对于彼此