526互联

双飞燕布局

发布时间 2024-01-01 00:54:33作者: 猝死的路上

在圣杯的基础上多加一层,使用padding使中间内容显示
不再需要定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header{
            background-color: #1be497;
            color: #fff;
            height: 50px;
            border: 1px solid black;
        }
        .footer {
            background-color: #1be497;
            color: #fff;
            height: 50px;
            border: 1px solid black;
        }

        .left,.right {
            width: 200px;
            float: left;
            background-color: lightgreen;
        }

        .left {
            margin-left: -100%;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .right {
            margin-left: -200px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .middle {
            float: left;
            width: 100%;
            background-color: #fb7400;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        .inner {
            padding: 0 200px;
        }
        .container {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="container clearfix">
        <div class="middle">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nihil nulla voluptate! Esse consequatur ipsum ullam, hic error laborum omnis blanditiis temporibus. Animi dicta dignissimos labore veritatis rerum, molestiae iure.
            Ipsum officia debitis excepturi cumque nostrum labore, neque nemo nihil optio nam nisi expedita sit accusamus tempore! Totam dolores suscipit provident nihil tempora rem, incidunt corporis expedita veritatis voluptas explicabo.
            Ex delectus ab quaerat quibusdam cum illo est veniam, dolorum molestias, corrupti ratione reiciendis mollitia id ad iusto? Temporibus tenetur reprehenderit id rem ipsum placeat quaerat facilis cum, in quisquam!
            Velit facilis ea assumenda eos quas, quasi dolor reprehenderit illo nihil recusandae optio eveniet quos vel quisquam alias dolorem, dignissimos dicta ratione iste, consequatur ut qui iure temporibus. Molestiae, laudantium.
            Consequatur, accusantium quaerat in nam vel amet error architecto deserunt voluptatibus aliquid quidem fuga labore exercitationem molestiae qui, atque, eligendi odio modi voluptate fugiat aperiam accusamus ex! Suscipit, iure aliquam.
            Corporis, mollitia tempora. Expedita omnis eligendi optio natus nisi? Nulla, voluptas et, optio sequi voluptate nesciunt ipsam, quam recusandae deserunt minus nisi rerum esse officia incidunt eaque quas consectetur ducimus?
            Vero nulla adipisci sapiente unde mollitia error cum perspiciatis voluptatum pariatur, dolores voluptate ducimus voluptatibus eligendi ullam eos repudiandae sed porro ipsum ab magni rem beatae? Architecto facilis iusto labore?
            Voluptas repellendus aliquid ipsum quos. Dignissimos consequuntur aut vitae asperiores esse distinctio, aperiam nobis optio doloribus soluta maiores, consequatur nihil architecto animi, cum tempora explicabo sint! Atque perferendis ex libero.
            imilique dolor excepturi distinctio eos, voluptatem praesentium necessitatibus!</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>