<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #max {
            width: 100vw;
            height: 100vh;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        
        #top,
        #center,
        #footer {
            width: 100vw;
        }
        
        #top {
            height: 10vh;
            background: red;
        }
        
        #center,
        #center-left,
        #center-right {
            height: 80vh;
        }
        
        #footer {
            height: 10vh;
            background: blue;
        }
        
        #center-left {
            width: 20vw;
            background: orange;
        }
        
        #center-right {
            position: relative;
            width: 80vw;
            background: deepskyblue;
            top: -80vh;
            left: 20vw;
        }
    </style>

    <body>
        <div id="max">
            <div id="top">top</div>
            <div id="center">
                <div id="center-left">left</div>
                <div id="center-right">right</div>
            </div>
            <div id="footer">footer</div>
        </div>
    </body>

</html>

版权声明：本文为GeekXwj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/GeekXwj/p/9305348.html