html height属性100%的元素没有覆盖整个window

Question

我想在页面底部添加页脚。我遵循了很多不同的教程，但它不起作用。当我缩放屏幕直到出现滚动条时，页脚位于 window 的底部而不是页面末尾。

这是我的 css:

 html {
    height: 100%;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body{
    position: relative;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100%;
    padding-bottom: 40px;
    margin: 0;
}
#footer{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin-left: 16%;
    margin-right: 16%;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 68%;
}

html结构：

<!DOCTYPE html>
<html lang="nl">
    <body>
          <nav>
                ....
          </nav>
          <div id="content">
                ....
          </div>
          <div id="footer">
                ....
          </div>
    </body>
</html>

图片：

the footer at the bottem of the window

when I scroll down

有没有人可以帮助我？

提前致谢！

Answer 1

肯定还有其他原因，因为您的代码在该示例中运行良好。你在使用 iframe 吗？请尝试放一段

此外，如果您有一个元素 float 定位，您应该在 #footer div 之前放置一个 <div style='clear:both>`，浮动如果你不清楚，元素可能会做很多奇怪的事情。

html {
    height: 100%;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body{
    position: relative;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100%;
    padding-bottom: 40px;
    margin: 0;
}
#footer{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin-left: 16%;
    margin-right: 16%;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 68%;
}

<html>
  <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="footer"> footer</div>
    </body>
  </html>

Answer 2

这是一种在页面底部添加页脚的绝妙方法，无需使用高度：100%。

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

<body class="Site">
  <header>header stuff!</header>
  <main class="Site-content">Main Content stuff</main>
  <footer>footer stuff!</footer>
</body>

html height属性100%的元素没有覆盖整个window

html element with height attribute 100% don't cover the whole window

html

css

footer