网页布局高度不满时，实现布局置底

 问题：如果网页内容不够长，让网页的footer部分始终在浏览器窗口的底部。

 

方法一：将内容部分的margin-bottom设为负数（兼容所有浏览器）

<div class="wrapper"> 
</div>
<div class="footer">footer</div>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer{
  height: 50px;
}

1. div.wrapper的margin-bottom需要和div.footer的-height值一样，注意是负height。

方法二：使用flexbox弹性盒布局（除了IE8前的都兼容）

以上方法的footer高度是固定的，如果footer的内容太多则可能会破坏布局。其实使用flex布局最好，如果不考虑老的IE的话。

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>

 

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

 

方法三：使用css3的calc()设置内容高度（不推荐，兼容不好）

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>

.content {
  min-height: calc(100vh - 50px);
}
.footer {
  height: 50px;
}