Question

我知道这可能是一个老问题，但我尝试了很多方法，如果内容很轻，比如2排，页脚会出现并留下很多空间。这是我的代码：

<html>
 <head></head>
<body>
  <div class='navbar'></div>
  <div class='maincontent'> main content</div>
  <footer class='footer-box'>
    footer content
  </footer>
</body>
</html>

我尝试将位置设置为相对或绝对，但它们都不适合我，我需要始终将页脚放在页面底部，无论maincontent的内容。任何的想法？非常感谢！

Answer 1

据我所知，您希望页脚位于视口的底部，除非主内容足够大以达到它，在这种情况下，您希望页脚位于页面底部。

在我看来，这是最好/最干净的方法：

^{请注意，这不是JavaScript解决方案，我添加了JS，因此您可以看到不断增长的.maincontent块的效果。请运行下面的代码段，看看我的意思。}

function addContent() {

  $('.maincontent').append('<p>more content</p>');

}

html {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  min-height: 100%;
}
.maincontent {
  padding-bottom: 1em;
  /* or the footer height */
}
.footer-box {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>

<head></head>

<body>
  <div class='navbar'>
    <button onclick="javascript:addContent()">add content</button>
  </div>
  <div class='maincontent'>main content</div>
  <footer class='footer-box'>
    footer content
  </footer>
</body>

</html>

Answer 2

将css属性添加到页脚元素：

.footer-box{
position:absolute;
bottom:0;
}

LIVE DEMO

Answer 3

看来你正在使用bootstrap，所以这对你有用

 <div class="navbar navbar-default navbar-fixed-bottom">
    </div>

Answer 4

即使问题得到解答，我也想提出一个使用flexbox的解决方案。

＆＃13;

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  background: blue;
}

footer{
  height: 70px;
  background: yellow;
}

＆＃13;

<main>
  Main content
</main>

<footer>
  Footer
</footer>

＆＃13;

Answer 5

试试这个：

footer.footer-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

如何在<html5中将<footer>始终保持在页面底部（不是屏幕）

5 个答案: