用css让div高度自动撑满屏幕

用css让div高度自动撑满屏幕

 

从事前端工作近五年了，说来惭愧，对css一直很头疼，今天又碰到了一个让元素自动撑满高度的问题，以此来适应不同的屏幕尺寸，查阅了一些资料，发现解决方法竟然如此简单，我也来简单地记录一下吧。

需求描述：页面有一个公共的头部，下面是正文的div，为了适应不同尺寸的屏幕，要求让这个div自动撑满高度，底部不要有白屏缝隙。

下面是一个简单的小demo。

html部分:

<div class="main">
   <div class="top"></div>
   <div class="bottom"></div>
</div>

css部分：

　* {
    margin: 0;
    padding: 0;
  }
  .main {
    width: 100%;
    height: 100%;
  }
  .top {
    height: 100px;
    background: pink;
  }
  .bottom {
    position: absolute;
    width: 100%;
    top: 100px;
    left: 0;
    bottom: 0;
    background: yellowgreen;
  }

简单的效果就实现了。

致谢：https://www.cnblogs.com/yoyogis/p/4040513.html