圣杯布局

wrang_hh

于 2019-04-11 21:17:13 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/m0_37666988/article/details/89220272

版权

  <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        .header{
            height: 100px;
            background: #666;
        }
        .main{
            background: #eee;
            flex: 1;
            display: flex;
        }
        .left{
            width: 100px;
            background: #f00;
        }
        .center{
            background: #0f0;
            flex: 1;
        }
        .right{
            width: 100px;
            background: #00f;
        }
        .footer{
            height: 100px;
            background: #666;
        }

    </style>
</head>
<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>