SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="syl.css">
</head>
<body>
    <div class="left">
        <div class="top">
        </div>
        <div id="info">
        </div>
    </div>

    <div class="right">
        <div class="top">
        </div>

        <div class="bott">
        <div class="list">
        </div>
        <div class="notes">
        </div>
        </div>
    </div>    
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
}

.top{
    height:60px;
    border-bottom: 1px solid #999;
}

.left{
    width: 30%;
    border-right: 1px solid #999;
    height: 100vh;
}

.right{
    flex: 1;/*自适应*/
    height: 100vh;
}

.right .bott{
    display: flex;
}
.list{
    width: 40%;
    border-right: 1px solid #999;
    height: 100vh;
}
.notes{
    flex:1;
}