随笔- 1793 文章- 1 评论- 61 阅读- 298万

html中布局，让下一个子元素占据剩余的高度

----------------------------------------------------------------------

原因是： height:100% 引起的，这句话的意思是，子元素的高度为父元素高度的100%，也就是和父元素（容器）的高度相等。

这样当父元素中有两个块级子元素时，假设父元素高度300px, 如果第一个子元素的高度是100，第二个子元素的高度是100%（即300px），则两个子元素的高度加起来就是100+300=400px,超出了父元素的高度。就会出现上面的现象了，就会出现滚动条了！！！！（所以，任何现象背后总是有原因存在的，我们要做的就是耐心的寻找到原因，然后就可以解决了）

-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <style>
        *{height: 100%;}
        .box{height: 100px; width: 100px;}
        .flex{display: flex; flex-direction: column;}
        .left{flex:1;}
    </style>
</head>
<body>
    <div class="flex" style="width: 300px; height: 300px; border: 1px solid black; ">
        <div class="right box" style="height: 100px; background-color:yellow;">menu</div>
        <div class="left box" style="height: 100%; background-color:green;">content</div>
    </div>
</body>
</html>