用css让div自动撑满屏幕

写项目遇到了一个问题，div自动铺满屏幕，以适配不同屏幕的大小，查了资料，找个一个特别简单的办法，记录一下

需求描述：
1.页面有一个公共的头部，高度固定。
2.下面是正文的div，要求让这个div自动撑满高度，底部不要有白屏缝隙，不能出现滚动条。

写一个小demo

html部分

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

css部分

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

简单说一下就是让最外层父级高度和宽度100%，头部给高度固定，内容区域高度100%