设置footer位置：让页面footer在正文内容不够是置于屏幕底部，当正文内容超过屏幕高度时置于正文底部

让页面footer在正文内容不够是置于屏幕底部，当正文内容超过屏幕高度时置于正文底部

//html布局

启用 flex模式，我们将class="page-container"的div的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）

.page-container {
  padding: 0;
  width: 100%;
  min-height:100%;
  height: 100%;
  margin: 0;
  display: flex;//启用flex
  flex-direction: column;//设置为列
}

最后设置header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域

flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率
flex-shrink：如果空间不足，元素的收缩比率
flex-basis：元素的伸缩基准值

//header部分css
.header{
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height:80px;
  z-index: 9999;
  background: darkslateblue;
  /* header 采用固定的高度，只占用必须的空间 */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

//主体部分css
.main-layout {
  margin-top: 80px;
  width: 100%;
  /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间而其他元素该属性值为0，因此不会得到多余的空间*/
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

//footer部分css
.footer{
  text-align: center; 
  width:100%;
  height: 60px;
  line-height: 60px;
  clear: both;
  background:rgb(61, 60, 60);
  color: white;
  /* 和 header 一样，footer 也采用固定高度*/
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

踩了很多坑，总结一下，记录！