布局题

1、父元素里有两个子元素，要求，A元素高度固定为100px，B元素填满剩下的区域。请写出相应的css。（高度自适应的问题！！）

<div class="container">
        <div class="A">
        </div>
        <div class="B">
        </div>
</div>

答：

方法一

body, html {
  height: 100%;
  width: 100%;
}
		    
.container {
  width: inherit;
  height: inherit;
  background: #EEE;

  position: relative;

}

.A {
  background: #BBE8F2;

  height: 100px;
}

.B {
  background: #D9C666;

  position: absolute;
  top: 100px;  //把上面的位置腾出来
  // 其他部分填满
  bottom: 0;   
  left: 0;
  right: 0;
}

补充知识点

当absolute之后，没有为元素设置width和height的时候，设置top、bottom、left、right会影响元素的大小哦

子元素width = 父元素width - left - right；
子元素height = 父元素height - top - bottom；

总结

高度自适应的问题，absolute的top、bottom、left、right可以帮你解决。
原理就是，absolute的top、bottom、left、right和width、height的奇妙关系~

方法二

.A {
  background: #BBE8F2;

  height: 100px;
}

.B {
  background: #D9C666;
  height: calc(100% - 100px); // 注意：100px和-之间要有空格，不然会被解析成负号，而没有运算符号和不生效。
}