CSS 将页脚固定在底部

Question

这是我将页脚粘贴到页面底部的代码:

#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}

当我设置高度时，效果非常好，但当我尝试设置最小高度时，它会在页脚下方留出一点空间。猜猜如何解决这个问题？

Answer 1

首先，body、html 和 container(参见类为“container”的元素)的高度必须为 height: 100%;在这个解决方案中，我使用了 flex box。所有现代浏览器和 IE11 都支持它。有必要向容器添加以下属性:

display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/

要将页脚移动到底部，只需添加到 flex 元素

margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */

html, body {
  height: 100%;
}

.container {
  height: 100%;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.header {
  height: 20%;
  background-color: yellow;
}

.content {
  background-color: white;
}

.footer {
  min-height: 20%;
  background-color: blue;
  margin-top: auto;
}

  <div class="container">
    <div class="header">Header</div>
    <div class="content">It's content</div>
    <div class="footer">Footer in bottom</div>
  </div>