CSS实现子元素自动充满父元素的剩余空间
在实际使用中,我们布局时会遇到,父级下面有多个元素,上面的子元素为固定高度,后面的子元素自动充满父级的剩余空间,如图:
容器元素500*500,父级元素100%占满,黄色区域高100px,让红色区域自动充满父级的剩余空间
使用定位实现
HTML
<div class="container"> <div class="father"> <div class="header"></div> <div class="content"></div> </div> </div>
CSS
.container{ width: 500px; height: 500px; background-color: #0bb8b2; } .father { width: 100%; height: 100%; position: relative; background-color:green; } .header{ height: 100px; background-color:yellow; } .content{ position: absolute; left: 0; right: 0; top: 100px; bottom: 0; background-color:red; }