div 自适应高度 自动填充剩余高度

1.方案一：使用定位

html：

<div class="outer">
    <div class="A"> 头部DIV </div>
    <div class="B">下部DIV </div>
</div>

css：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.outer {
  height: 100%;
  position: relative;
  padding: 100px 0 0;
  box-sizing: border-box;
}

.A {
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #bbe8f2;
}

.B {
  height: 100%;
  background-color: #d9c666;
}

首先给父盒子和第一个子盒子加子绝父相，让第一个盒子脱离标准流，浮在其余盒子的上面，然后让父盒子的上padding值 = 第一个子盒子的高度，并且加上box-sizing ： border-box，让父盒子仍然保持原有高度，这样有定位的第一个子盒子就能占掉父盒子的padding值，最后把第二个子盒子高度设为100%，与父盒子同高（此时的高度是不会包含padding值的），就能实现盒子自动撑开了。

效果：

2.方案二：padding和margin结合

html：

<div class="outer">
    <div class="A">头部DIV</div>
    <div class="B">下部DIV</div>
</div>

css：

html.body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.outer {
  height: 100%;
  padding: 80px 0 0;
  box-sizing: border-box;
}

.A {
  height: 80px;
  margin-top: -80px;
  background-color: #bbe8f2;
}

.B {
  height: 100%;
  background-color: #d9c666;
}

给父盒子加上与第一个子盒子高度相等的padding-top值，并且加上border-box，然后把第一个子盒子的margin-top值设置为与父盒子padding-top值相同，覆盖padding部分，最后把第二个子盒子高度设为100%，与父盒子内容同高，实现盒子自动填充高度。

注意！！父盒子的padding-top值一定与第一个子盒子高度相同，否则底部会有空白或是第二个盒子显示不全。因为第二个子盒子高度与父盒子内容高度相等，padding-top值一定与第一个盒子高度相同才能让第二个盒子刚好全部在屏幕显示。

效果：