圣杯布局要求
- header和footer各自占领屏幕所有宽度，高度固定
- 中间dontainer部分为左中右三栏式布局
- 三栏布局中左右两侧宽度固定，中间部分自动填充
实现方式
1.浮动
- 先定义header和footer的样式，使其宽度撑满，高度随意
- container中三列设置为浮动和相对定位，且center部分放在最起那么，对footer设置
clear:both;清除浮动 - 三列中的左右定宽
200px，中间设置100% - 由于浮动关系，center会撑满container，左右会被挤下去，给left添加
margin-left:-100%,使left回到上一行的最左侧 - 会发现left遮住了center部分，给container设置
padding-left:200px;padding-right:200px;,给left和right腾出位置； - 这时的left由于
padding的原因并不在最左侧，之前设置了定位，可以给left添加right:200px,使left回到最左侧 - 对于right可以设置
margin-right:-200px;，使其回到第一行
最好设置一个最小宽度防止页面变形
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>圣杯布局</title>
8 <link rel="stylesheet" href="">
9 </head>
10 <style type="text/css" media="screen">
11 /**
12 圣杯布局要求
13 1.header和footer各自占领屏幕所有宽度，高度固定。
14 2.中间的container是一个三栏布局。
15 3.三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
16 4.中间部分的高度是三栏中最高的区域的高度。
17 */
18 body {
19 min-width: 600px;
20 }
21
22 .header, .footer {
23 width: 100%;
24 height: 100px;
25 background: #ccc;
26 }
27
28 .footer {
29 clear: both;
30 }
31
32 .container {
33 padding: 0 200px;
34 }
35
36 .container .column {
37 float: left;
38 position: relative;
39 height: 400px;
40 }
41
42 #left {
43 width: 200px;
44 right: 200px;
45 background: pink;
46 margin-left: -100%;
47 }
48
49 #right {
50 width: 200px;
51 background: red;
52 margin-right: -200px;
53 }
54
55 #center {
56 width: 100%;
57 background: blue;
58 }
59 </style>
60
61 <body>
62 <div class="header">header</div>
63 <div class="container">
64 <div id="center" class="column">center</div>
65 <div id="left" class="column">left</div>
66 <div id="right" class="column">right</div>
67 </div>
68 <div class="footer">footer</div>
69 </body>
70
71 </html>
2.flex弹性布局
- 先定义header和footer的样式，使其宽度撑满，高度随意
- container中的left、center、right依次排列
- container设置弹性布局
display：flex; - left、right区域定宽，center部分设置
flex:1;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>圣杯布局-flex</title>
6 </head>
7 <style>
8 body{
9 min-width: 600px;
10 }
11 .header,.footer{
12 width: 100%;
13 height: 100px;
14 background: #ccc;
15 }
16 .container{
17 display: flex;
18 }
19 .container .column{
20 height: 400px;
21 }
22 #left{
23 width: 200px;
24 background: pink;
25 }
26 #center{
27 flex: 1;
28 background: blue;
29 }
30 #right{
31 width: 200px;
32 background: red;
33 }
34 </style>
35 <body>
36 <div class="header">header</div>
37 <div class="container">
38 <div id="left" class="column">left</div>
39 <div id="center" class="column">center</div>
40 <div id="right" class="column">right</div>
41 </div>
42 <div class="footer">footer</div>
43 </body>
44 </html>
原文地址：https://www.cnblogs.com/smallpen/p/10306593.html
时间： 2024-10-08 15:01:30