圣杯布局【双飞翼布局】的几种实现

来源：互联网发布：科学网博弈复杂网络编辑：程序博客网时间：2024/05/16 14:59

圣杯布局【双飞翼布局】：两边定宽，中间宽度自适应；且优先渲染中间主题内容部分。

一、负边距法

DOM结构：
由于需要优先渲染主题内容部分，因此在DOM结构中需要将其写在左右侧边栏之前。

    <header>header</header>    <main>        <div class="mid">            <div class="middle">middle</div>        </div>        <aside class="left">left</aside>        <aside class="right">right</aside>    </main>    <footer>footer</footer>

样式表：
1. 左中右部分均左浮动，且左右设置定宽，中间设置宽度为100%，此时左右边栏完全被主体部分遮挡。
2. 负边距：左侧边栏的左负边距设置为100%，右侧边距的左负边距设置为自身宽度，此时左侧边栏在主体内容两侧排列，但主体内容位于侧边栏以下部分被遮挡。
3. 设置主体内容部分的左右边距为相应侧边栏宽度，以此收缩自身宽度，使其内容可完全展示。

        header{            height: 70px;            background-color: #EFE994;        }        main {            height: 500px;            overflow: hidden;        }        .mid {            float: left;            width: 100%;            height: 100%;            background-color: #98D8DA;        }        .middle {            height:100%;            margin-left: 200px;            margin-right:200px;        }        .left,        .right {            float: left;            width: 200px;            height: 100%;        }        .left {            margin-left: -100%;            background-color: #FAC3FC;        }        .right {            margin-left: -200px;            background-color: #F5C4C4;        }        footer {            height: 50px;            background-color: #EFE994;        }

二、弹性盒模型法

整个页面布局由两个弹性盒模型构成：
1. body作为盒子，header、main、footer按垂直方向排列，上下设置定高之后中间设置flex=1自动填满剩余高度。
2. main作为盒子，left、middle、right按水平方向排列（默认），左右设置定宽后中间设置flex=1自动填满剩余宽度。
3. 设置order=-1将左侧边栏拉到主体内容之前。

<!DOCTYPE html><meta charset=utf-8><html><head>    <title>holy</title>    <style type="text/css">        body {            display: flex;            min-height: 100vh;            flex-direction: column;        }        header,        footer{            flex-basis: 70px;            background-color: #AAD6E1;        }        main {            display: flex;            flex: 1;        }        .middle {            flex: 1;            background-color: #eee;        }        .left,        .right {            flex-basis: 200px;            background-color: #FEDAD6;        }        .left {            order: -1;        }    </style></head><body>    <header>header</header>    <main>        <div class="middle">middle</div>        <aside class="left">left</aside>        <aside class="right">right</aside>    </main>    <footer>footer</footer></body></html>

阅读全文

1 0