纯Css实现两个Div占满整屏高度

最初踩坑网上搜教程一堆什么乱七八糟的百分比之类的博客，浪费时间浪费精力

话不多说：

首先说明业务场景：我需要两个div占满整屏，上边这个div的高度已经确定，那么我需要实现下边这个div自适应充满下边空间。

方法一： 使用 calc

height:calc(100vh - 200px);

(PS: 这个方法最常见，Css3的新计算属性)

方法二： 使用flex

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .parent{
            display: flex;
              flex-flow: column;
              height:100vh;
        }
        .box1{
            width: 100%;
            height: 200px;
            position: relative;
            background-color: red;
        }
        .box2{
            flex: 1;
            position: relative;
            background-color: blue; 
        }
    </style>
    <title></title>
</head>
<body>
    <div class="parent">
        <div class="box1"></div>
        <div class="box2"/>
    </div>
</body>
</html>

(PS：既然flex可以横向自适应，自然也可以纵向，算一个奇淫巧技吧 )

来源：https://blog.csdn.net/makerbeen/article/details/108107619

我的使用：

 

    .panelCustomer {
        display: flex;
        flex-flow: column;
        border-radius: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        box-sizing: border-box;
        height: 100%;
    }
    .topPanelHeader {
        padding-right: 10px;
        vertical-align: central;
        padding-left: 10px;
        height: 25px;
    }
    #leftParent {
        position: relative;
        background-color: red;
        height: 100%;
        padding: 5px;
        box-sizing: border-box;
        overflow-y: auto;
    }

 

posted @ 2021-12-08 10:53  星星c#  阅读(961)  评论(0)  编辑  收藏  举报