CSS佈局(五) 聖盃佈局
阿新 • • 發佈：2019-01-01
本文翻譯修改自https://alistapart.com/article/holygrail
聖盃佈局
在頁面上的顯示效果就是左右兩邊是個固定的寬度，中間的容器自適應；即根據頁面大小的變化而變化。
如何實現
戰略很簡單。容器div的側面有自適應中心和固定寬度的襯墊。然後訣竅是讓左列與左側填充對齊，右側列與右側填充對齊，留下中心列以填充容器的自適應寬度。
1、基本結構
<div id='header'></div> <div id='container'> <div id='center' class='column'> </div> <div id='left' class='column'> </div> <div id='right' class='column'> </div> </div> <div id='footer'></div>
給點基本樣式
div{
text-align: center;
}
#header,#footer{
background-color: #666666;
}
#center{
background-color: #D6D6D6;
}
#left{
background-color: #77BBDD;
}
#right{
background-color: #FF6633;
}效果
左右寬度，假設需要右側 150px 左側 200px。
#container{ padding-left: 200px; /* 左側寬度 */ padding-right: 150px; /* 右側寬度 */ }
效果
2、給左右新增寬度，並在一行顯示。
還需要清除頁尾，使其保持在浮動列的下方。
#container .column{ float: left; } #center { background-color: #D6D6D6; width: 100%; } #left { background-color: #77BBDD; width: 200px; } #right { background-color: #FF6633; width: 150px; } #footer { clear: both; }
請注意，中心列的100％寬度是指容器div的寬度，不包括填充。當佈局結合在一起時，我們會再次看到這個100％的寬度，它仍將引用容器的這個中心寬度。
列現在要按順序排列，但由於中心列佔用了可用空間的100％，因此左右列會換行。
3、左列
唯一剩下的就是讓colums與容器上的填充物對齊。中間列準確地從它需要的位置開始。
#left {
background-color: #77BBDD;
width: 200px;
margin-left: -100%;
}現在，左列與中心列重疊，共享其左邊緣。右列向左浮動並緊靠中心列的右邊緣（但仍然包裹），留下以下內容：
使用相對定位，其偏移量恰好是左列的寬度。
#container .column{
float: left;
position: relative;
}
#left {
background-color: #77BBDD;
width: 200px;
margin-left: -100%;
right: 200px;
}
右列
將它從容器中拉出並放入容器的填充物中。
#right {
background-color: #FF6633;
width: 150px;
margin-right: -150px;
}
優化
如果調整瀏覽器視窗的大小以使中心變得小於左列。
設定body的min-width
body{
min-width: 550px; /* 左側的兩倍 + 右側 */
}IE6
* html #left{
left:150px;
}簡單的新增文字
在基本樣式上新增一些padding和一些文字，讓頁面看起來更美觀一點。可以參考https://jadedoo.github.io/ife/layout/grail_1.html
三列等高
#container{
padding-left: 200px; /* 左側寬度 */
padding-right: 190px; /* 右側寬度 */
overflow: hidden;
}
#container .column{
float: left;
position: relative;
padding-bottom: 20010px; /*margin-bottom + padding-bottom*/
margin-bottom: -20000px;
}
#footer {
clear: both;
position: relative;
}可以參考https://jadedoo.github.io/ife/layout/grail_2.html
完整程式碼
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聖盃佈局</title>
</head>
<body>
<div id='header'><h1>This is the header.</h1></div>
<div id='container'>
<div id='center' class='column'>
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id='left' class='column'>
<h1>This is the left sidebar.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. </p>
</div>
<div id='right' class='column'>
<h1>This is the right content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<div id="footer-wrapper">
<div id='footer'><h1>This is the footer.</h1></div>
</div>
</body>
</html>css
<style>
*{margin: 0;padding: 0;}
* html body {
overflow: hidden;
}
body{
min-width: 630px;
}
div {
text-align: center;
}
#header,
#footer {
background-color: #666666;
padding: 10px 0;
}
#container{
padding-left: 200px; /* 左側寬度 */
padding-right: 190px; /* 右側寬度 */
overflow: hidden;
}
#container .column{
float: left;
position: relative;
padding-bottom: 20010px; /*margin-bottom + padding-bottom*/
margin-bottom: -20000px;
}
#center {
background-color: #D6D6D6;
width: 100%;
padding: 10px 20px;
}
#left {
background-color: #77BBDD;
width: 180px;
margin-left: -100%;
right: 240px;
padding: 0 10px;
}
#right {
background-color: #FF6633;
width: 130px;
margin-right: -190px;
padding: 0 10px;
}
#footer {
clear: both;
position: relative;
}
* html #left{
left:150px;
}
* html #footer-wrapper{
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background-color: #fff;
}
</style>