子元素撑满父元素

我们在给子元素设置height : 100%

时候前提是父盒子固定高或者百分比

父元素如果用min-height 这个属性的话,高度不确定,子元素height:100%,不会生效

注意 :

我们给父元素height:100%的时候发现不会撑满整个屏幕,原因是body,html,高度.

我们只要设置100%就解决了

body,html{
    height: 100%;
}
.father{
    width: 100%;
    height: 100%; //这里只能用固定百分比或者px值
    padding: 0 90px;
    box-sizing: border-box;
    background: red
}
.son{
    width: 100%;
    height: 100%;
    background: blue;
}
<div class="father">
    <div class="son"></div>
</div>

 展示的效果如下 :