Question

我想在页面的机器人上有一个页脚。我已经遵循了很多不同的教程，但它不起作用。当我缩放我的屏幕直到有一个滚动条时，页脚位于窗口的底部而不是页面的末尾。

这是我的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＆gt;`，浮动元素可以做很多奇怪的事情如果你不清楚的话。

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>

高度属性为100％的html元素不会覆盖整个窗口

2 个答案: