圣杯布局是讨论「三栏液态布局」的实现,它最早出自于谁或许不得而查了。
所谓液态布局是相对固态布局而言的,固态布局就是固定值不变的布局,液态就好比在容器里到了一杯水,它可以随着容器宽度的变化而自适应宽度。(说白了,就是三栏布局,两边固定,中间自适应)
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
第一种方法
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
height: 200px;
position: relative;
float: left;
}
#center {
background-color: #e9e9e9;
width: 100%;
}
#left {
background-color: red;
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
background-color: blue;
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
#header,
#footer {
background-color: #c9c9c9;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
第二种方法:
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#left{
position: absolute;
width:200px;
height: 300px;
left: 0px;
top: 0px;
background: red;
}
#center{
margin-left: 200px;
margin-right: 200px;
height: 300px;
background:#ccc;
}
#right{
position: absolute;
width:200px;
height: 300px;
right: 0px;
top: 0px;
background:blue;
}
</style>
第三种方法(CSS3)
<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
}
#left{
width: 200px;
padding:20px;
background-color: red;
}
#center{
-moz-box-flex:1;
-webkit-box-flex:1;
padding:20px;
height: 900px;
font-size: 30px;
background-color: yellow;
}
#right{
width: 200px;
padding:20px;
background-color:blue;
}
/* #left,#center,#right{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}*/
</style>