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

时间:2016-10-20 14:05:56

标签: html css footer

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

这是我的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

有人可以帮助我吗?

提前谢谢你!

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

这是一种将页脚粘贴在页面底部的绝佳方法,不使用高度: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>