css-布局-圣杯模型布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css-布局-圣杯模型布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                min-width: 600px;
            }

            .head,
            .footer {
                width: 100%;
                height: 80px;
                text-align: center;
                line-height: 50px;
                background-color: #A9A9A9;
            }

            .left,
            .middle,
            .right {
                float: left;
                position: relative;
                min-height: 200px;
                margin-bottom: -2000px;
                padding-bottom: 2000px;
            }

            .main {
                padding: 0 200px;
                /*目的:使父div具有高度*/
                overflow: hidden;
            }

            .middle {
                width: 100%;
                background-color: red;
            }

            .right {
                width: 200px;
                background-color: blue;
                margin-right: -200px;
            }

            .left {
                width: 200px;
                background-color: green;
                margin-left: -100%;
                left: -200px;
            }

            .footer {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="head">head<br /></div>
        <div class="main">
            <div class="middle">
                middle
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
                <br>圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。
            </div>
            <div class="left">
                left
                <br>左右两侧高度自适应</div>
            <div class="right">
                right
                <br>左右两侧高度自适应</div>
        </div>
        <div class="footer">footer</div>

    </body>
</html>
css-布局-圣杯模型布局

猜你喜欢
