用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