页面布局

发表于 更新于 分类于 阅读次数：
总结常见 CSS 页面布局方案，包含两列左定宽右自适应、三列圣杯布局、圣杯布局及 Flex 和 Grid 布局实现方式，附完整代码示例。

两列左侧定宽，右侧自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .aside{float:left;width:200px;border:1px solid blue;height:100%;position:relative;margin-right:-100%;}
    .main{float:right;width:100%;height:100%;}
    .main-container{margin-left:210px;height:100%;border:1px solid red;}
</style>
<div class="wrap">
    <aside class="aside">
        aside
    </aside>
    <section class="main">
        <article class="main-container">main</article>
    </section>
</div>

两列右侧定宽，左侧自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .main{float:left;width:100%;height:100%;}
    .aside{float:right;width:200px;border:1px solid blue;height:100%;position:relative;margin-left:-100%;}
    .main-container{margin-right:210px;height:100%;border:1px solid red;}
</style>
<div class="wrap">
    <section class="main">
        <article class="main-container">main</article>
    </section>
    <aside class="aside">
        aside
    </aside>
</div>

三列右侧自适应布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}


    .sidebar,.sidenav{float:left;position:relative;box-sizing: border-box;height:100%;}
    .sidebar{border:1px solid red;width:60px;}
    .sidenav{border:1px solid blue;width:200px;}
    .main{float:right;width:100%;margin-left:-260px;height:100%;}
    .main-container{margin-left:270px;border:1px solid green;height:100%;}
</style>
<div class="wrap">
    <!-- sidebar -->
    <aside class="sidebar">
        sidebar
    </aside>
    <!-- sidenav -->
    <aside class="sidenav">
        sidenav
    </aside>

    <section class="main">
        <article class="main-container">main</article>
    </section>
</div>

三列左侧自适应布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .sidebar,.sidenav{float:right;position:relative;box-sizing: border-box;height:100%;}
    .sidebar{border:1px solid red;width:60px;}
    .sidenav{border:1px solid blue;width:200px;}
    .main{float:right;width:100%;margin-right:-260px;height:100%;}
    .main-container{margin-right:270px;border:1px solid green;height:100%;}
</style>
<div class="wrap">
    <!-- sidebar -->
    <aside class="sidebar">
        sidebar
    </aside>
    <!-- sidenav -->
    <aside class="sidenav">
        sidenav
    </aside>

    <section class="main">
        <article class="main-container">main</article>
    </section>
</div>

三列中间自适应布局

margin负值法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .sidebar,.sidenav{position:relative;box-sizing: border-box;height:100%;}
    .sidebar{float:left;border:1px solid red;width:60px;margin-right:-100%}
    .sidenav{float:right;border:1px solid blue;width:200px;margin-left:-100%}
    .main{float:left;width:100%;height:100%;}
    .main-container{border:1px solid green;height:100%;margin-left:60px;margin-right:200px;}
</style>
<div class="wrap">
    <!-- sidebar -->
    <aside class="sidebar">
        sidebar
    </aside>

    <section class="main">
        <article class="main-container">main</article>
    </section>

    <!-- sidenav -->
    <aside class="sidenav">
        sidenav
    </aside>
</div>

圣杯布局

三列中间自适应布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .left,.middle,.right{position: relative;float: left;box-sizing:border-box;height:100%;}
    .middle{border:1px solid red;width:100%;padding-left:100px;padding-right:200px;}
    .left{border:1px solid blue;width:100px;margin-left:-100%;}
    .right{border:1px solid green;width:200px;margin-left:-200px;}
</style>
<div class="wrap">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

双飞翼布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .main,.sub,.extra{float: left;box-sizing:border-box;height:100%;}
    .main{width:100%;}
    .main-inner{margin-left:100px;margin-right:200px;border:1px solid red;height:100%;}
    .sub{border:1px solid blue;width:100px;margin-left:-100%;}
    .extra{border:1px solid green;width:200px;margin-left:-200px;}
</style>
<div class="wrap">
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="sub">sub</div>
    <div class="extra">extra</div>
</div>

浮动布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .main,.sub,.extra{box-sizing:border-box;height:100%;}
    .main{margin-left: 100px;margin-right:200px;border:1px solid red;}
    .sub{float:left;width:100px;border:1px solid blue;}
    .extra{float:right;width:200px;border:1px solid green;}
</style>
<div class="wrap">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

定位布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;height:100%;}

    .sub,.extra{position:absolute;top:0; box-sizing:border-box;height:100%;}
    .sub{left:0;width:100px; border:1px solid blue;}
    .extra{right:0;width:200px; border:1px solid green;}
    .main{margin-left: 100px;margin-right:200px; border:1px solid red;height:100%;}
</style>
<div class="wrap">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

margin与padding互冲等高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;border:1px solid black;}

    .left,.main,.right{float:left;padding-bottom:99999px;margin-bottom:-99999px;}
    .left {width: 100px;background-color:#ddd;}
    .main{width:300px;background-color:blue;}
    .right{width:200px;background-color:red;}
</style>
<main class="wrap">
    <section class="left">left <br/> left<br/> left</section>
    <section class="main">main<br/>  </section>
    <section class="right">right<br/>right<br/>  </section>
</main>

边界等高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;border:1px solid black;}
    .main{float:left;background-color:blue;width:500px;
        border-left:100px solid #0f0; /* 边框大小等于左边栏宽度，颜色和左边栏背景色一致*/
        border-right:200px solid #f00;/* 边框大小等于右边栏宽度，颜色和右边栏背景色一致*/
    }
    .left{float:left;width:100px; margin-left:-100px}
    .content{float:left; width:500px; margin-right:-500px; }
    .right{float:right; width:200px; margin-right:-200px; }
</style>
<main class="main">
    <section class="content">main<br/>main<br/></section>
    <section class="left">left<br/> left <br/>left <br/>left <br/>left <br/></section>
    <section class="right">right<br/> </section>
</main>

表格等高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*{margin:0;padding:0;}
html,body{height:100%;}
.wrap{overflow:hidden;border:1px solid black;}
.main{display:table;}
.left,.content,.right{display:table-cell;}
.left{width:100px;border:1px solid blue;}
.content{width:500px;border:1px solid red;}
.right{ width:200px;border:1px solid green;}
</style>
<main class="main">
    <section class="content">main<br/>main<br/></section>
    <section class="left">left<br/> left <br/>left <br/>left <br/>left <br/></section>
    <section class="right">right<br/> </section>
</main>

flex 等高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .wrap{overflow:hidden;border:1px solid black;}
    .main{display:flex;}
    .left{width:100px;border:1px solid blue;}
    .content{width:500px;border:1px solid red;}
    .right{ width:200px;border:1px solid green;}
</style>
<main class="main">
    <section class="content">main<br/>main<br/></section>
    <section class="left">left<br/> left <br/>left <br/>left <br/>left <br/></section>
    <section class="right">right<br/> </section>
</main>