当前位置： 移动技术网 > IT编程>网页制作>HTML > CSS自适应铺满浏览器全屏布局

CSS自适应铺满浏览器全屏布局

2020年07月12日  | 移动技术网IT编程  | 我要评论

分享一个HTML中的布局样式
布局
代码：

<!DOCTYPE html>
<html>
    <head>
        <title>CSS自适应布局</title>
        <style>
            :root{
                --topHeight:60px;
                --leftBox:300px
            }
            .topbar{
                color: white;
                width: 100%;
                height: var(--topHeight);
                background: black;
                position: absolute;
            }
            .zhong{
                width: 100%;
                top: var(--topHeight);
                position: absolute;
                bottom: var(--topHeight);
            }
            .zhong .left{
                height: 100%;
                width: var(--leftBox);
                float: left;
                overflow: auto;
                background: yellowgreen;
            }
            .zhong .right{
                height: 100%;
                margin-left:calc(var(--leftBox) + 20px);
                background: yellowgreen;
            }
            .bottom{
                color: white;
                width: 100%;
                height: var(--topHeight);
                bottom: 0px;
                position: absolute;
                background: black;
            }
        </style>
    </head>
    <body style="margin: 0px;padding: 0px;">
        <div class="topbar">顶边的盒子</div>
        <div class="zhong">
            <div class="left">左边的盒子</div>
            <div class="right">右边的盒子</div>
        </div>
        <div class="bottom">底边的盒子</div>
    </body>
</html>

相信利用这个布局可以分构出许多的布局出来

本文地址：https://blog.csdn.net/qq_28429161/article/details/107280335

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网