每日练习:有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

2019-09-06

阅读 1 分钟

解析原理:
外层div设置高度为100%,宽度200px,相对定位.
内层第一个div给个高度100px,加个底色方便区分.
内层第二个div设置距离顶部的距离为100px,底部距离为0,宽度为100%,绝对定位.底色为灰色.

代码:

<html>
<body>
    <style>
        .div1{
            width:200px;
            height:100%;
            background:black;
            position:relative;
        }
        .div2{
            height:100px;
            background:#26687c;
        }
        .div3{
            background: #bbbbbb;
            top: 100px;
            bottom: 0;
            width: 100%;
            position: absolute;
        }
    </style>
<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>
</body>
</html>

效果图: