动手实现一个左右固定100px,中间自适应的三列布局。圣杯布局。

最新推荐文章于 2023-03-29 13:13:01 发布

妙莲

最新推荐文章于 2023-03-29 13:13:01 发布

阅读量221

点赞数

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

本文链接：https://blog.csdn.net/weixin_44166439/article/details/113400778

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在这里插入图片描述

   <head>
        <title>脚手架-ES2019从入门到精通</title>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                overflow: hidden;
                padding: 0 100px;
            }
            .main {
                width: 100%;
                height: 100%;
                background: yellow;
                float: left;
                overflow: scroll;
            }
            .main .content {
                border: 10px solid;
                height: 1000px;
            }
            .left {
                width: 100px;
                height: 100%;
                background: blue;
                float: left;
                margin-left: -100%;
                position: relative;
                left: -100px;
            }
            .right {
                width: 100px;
                height: 100%;
                float: left;
                background: red;
                margin-right: -100%;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="content">middle</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>