使用vw,vh对页面进行布局 

<!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>

告别了以前height不能直接用百分比的麻烦, 如果用vw，vh的话 请全局尽量都用vw，vh，如果又用这个又用百分比的话 会造成意想不到的意外(亲测)

欢迎加群:822162679

posted @ 2018-07-13 15:44  徐伟杰  阅读(1365)  评论(0)  编辑  收藏  举报