码迷,mamicode.com
首页 > Web开发 > 详细

css——圣杯布局

时间:2019-01-23 00:16:15      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:弹性布局   scree   type   nbsp   meta   href   nta   相对   display   

圣杯布局要求

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

 

css——圣杯布局

标签:弹性布局   scree   type   nbsp   meta   href   nta   相对   display   

原文地址:https://www.cnblogs.com/smallpen/p/10306593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!