圣杯布局要求
- 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——圣杯布局
原文地址：https://www.cnblogs.com/smallpen/p/10306593.html