css——圣杯布局

圣杯布局要求

  • 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>

 

posted on 2019-01-22 22:48  smallpen  阅读(208)  评论(0)  编辑  收藏  举报