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

最新推荐文章于 2024-06-17 10:49:59 发布

安全狮

最新推荐文章于 2024-06-17 10:49:59 发布

阅读量1.1k

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_28429161/article/details/107280335

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

分享一个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>

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

安全狮

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS自适应铺满浏览器全屏布局

分享一个HTML中的布局样式代码：<!DOCTYPE html><html> <head> <title>CSS自适应布局</title> <style> :root{ --topHeight:60px; --leftBox:300px } .topbar
复制链接

扫一扫

专栏目录