zoukankan html css js c++ java

使用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

查看全文

相关阅读:
第09组 Alpha冲刺 (2/6)
第08组 Beta冲刺 (1/5)
第08组 Alpha冲刺总结
 第08组 Alpha冲刺 (6/6)
第08组Alpha冲刺(5/6)
第08组 Alpha冲刺 (4/6)
第08组 Alpha冲刺 (3/6)
第08组 Alpha冲刺 (2/6)
第08组 Alpha冲刺 (1/6)
第12组 Beta冲刺(2/5)

原文地址：https://www.cnblogs.com/GeekXwj/p/9305348.html