admin管理员组

文章数量:1611511

效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 填充整个页面 */
        .header{
            position: absolute ;
            /* 设置宽度自适应填充满 */
            left: 0; 
            right: 0;
            /* 设置高度自适应填充满 */
            top: 0;
            bottom: 90vh;
            background-color: purple;
        }

        .left{
            position: absolute;
            top: 10vh;
            bottom: 0;
            left: 0;
            right: 80vw;
            background-color: pink;
        }
        .content{
            position: absolute;
            top: 10vh;
            bottom: 0;
            left: 20vw;
            right: 0;
            background-color: teal ;
        }
    </style>
</head>
<body>
    <div class="header">
        <h2>头部</h2>
    </div>
    <div class="left">
        <h2>左侧</h2>
    </div>
    <div class="content">
        <h2>右侧</h2>
    </div>
</body>
</html>

本文标签： 自适应布局页面Positionabsolute

版权声明：本文标题：position: absolute进行页面的自适应布局 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728605248a1165367.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。