弹性盒-圣杯布局

最新推荐文章于 2023-08-27 19:14:20 发布

陌上烟雨寒

最新推荐文章于 2023-08-27 19:14:20 发布

阅读量126

点赞数

分类专栏： css 文章标签： html css flex

本文链接：https://blog.csdn.net/weixin_47180815/article/details/106604038

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
实现方式：
下面代码中
关于html,body{height:100%}，看不太懂的可以参考

    https://blog.csdn.net/javaloveiphone/article/details/51098972

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,
        html {
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        .header {
            height: 100px;
            background-color: rgb(156, 148, 148);
        }
        .main {
            flex: 1;
            background-color: rgb(217, 190, 219);
            display: flex;
        }
        .main .left,
        .main .right {
            width: 100px;
            background-color: antiquewhite;
        }
        .center {
            background-color: rgb(228, 183, 183);
            flex: 1;
        }
        .footer {
            height: 100px;
            background-color: rgb(156, 148, 148);
        }
    </style>
<body>
    <div class="header">header</div>
    <div class="main">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

陌上烟雨寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒-圣杯布局

效果图：实现方式：下面代码中关于html,body{height:100%}，看不太懂的可以参考 https://blog.csdn.net/javaloveiphone/article/details/51098972 <style> * { margin: 0; padding: 0; } body, html { height:
复制链接

扫一扫