在當今使用者的顯示器越來越大的今天，之前的1024*768固寬布局有點越來越不合時宜，對大螢幕的使用者而言，兩側空空的留白給人第一眼的印象是嚴重的螢幕浪費，作為網頁設計師的你有責任給這一批使用者一個良好的使用者介面。
當然為了減少這種螢幕的浪費，採用彈性流體布局是最好的解決方案，它可以充分利用螢幕空間，無論你是多大分辯率的使用者，都能盡情滿屏展示內容。然而因為種種限制，目前的網頁完全採用流體彈性布局條件還不具備(特別是瀏覽器廠商對標準的肆意蹂躪以及CSS標準的不完全支援等等)。作為夾在使用者和廠商的中間者，我們只能以一種相容的心態去適應兩者的差距。所以，作為一種過渡的解決方案，有了這樣一種布局：彈性+固寬布局。
這裡所說有彈性，指的是背景去自適應螢幕寬度，而固寬呢，則是讓本文內容無論在寬屏還是窄屏中都能自動置中。夾縫中求生存，以滿足不同大小分辯率使用者的需要。如所示的設計就是一個典型的範例。
圖一
廢話少說，言歸正傳，我們就來製作一個這樣的布局結構：
首先構建結構層：
<div id="wrapper">
<div id="main" class="clearfix">
<div id="header">
<div id="inheader"></div>
</div>
<div id="content"></div>
</div>
</div>
<div id="footer">
<div id="infoot"></div>
</div>
分析一下結構層，一個網頁一般包括頁頭，內容區和頁尾三大部分，我們將頁頭和內容放在一個容器層，取名為wrapper，而將頁尾獨立出來，取名為footer，為什麼要這樣設計，我們想讓這個頁尾在內容區不滿一屏的情況下也是絕對居底的。
我們將wrapper和footer這兩個容器設定100%的寬度，讓它自動適應螢幕的寬度。並且也將header頁頭地區也設定成100%寬度。這樣我們可以在頁頭和頁尾中插入一張可以水平平鋪的圖片，使頁頭和頁尾的背景在大螢幕下能水平充滿整個螢幕空間。
作為本文內容，我們一般的做法是，當分辯率變大，讓它置中顯示，兩側留出空白。因為頁頭地區已經設定為100%寬度，所以我們在header中再添加一個容器層inheader，它來作為真正的頁頭文字內容的載體，我們再給它設定一個固定的寬度值，比如是960像素寬，然後讓它自動置中。
#inheader{width:960px;height:110px; margin:0 auto; }
這樣頁頭的本文浮動haeader的上層，這兩個層可以設定不同的背景圖片，形成一個疊加的頁頭效果，它能自動適應更大的螢幕分辯率。
同樣的道理，頁尾也可以採用這種方法來實現。
在上面的結構層，我在中間內容區沒有採用這種方法，而是做了一點變通，我們可以看到在content這個內容區中，沒有內嵌一個容器，而只有一個容器。如果我們為了讓本文內容的兩側在大分辯率下兩側不顯得太空洞，該怎麼辦呢，當然你可以採用頁頭和頁尾的做法，在它的內容再加一個div。當然為了減少嵌套，我們可以採用變通的辦法。我們可以將一張超大的圖片加在body中背景中，並用background-position來定位置中顯示這張圖片，這樣在內容區兩側的圖片就顯示出來了。
本部落格就是一個具體案例，在大分辯率下看看本部落格兩側圖片，然後縮小視窗，就可以看到兩側圖片在1024*768時只顯示了一小塊，而本文內容始終置中顯示的。
為了示範效果，我們加入一些其它顏色調置，最後的樣式如下所示：
*{margin:0;padding:0;}
html, body, #wrapper {height: 100%;font-size:12px;}
#wrapper{width:100%;background:#777;}
body > #wrapper {height:auto; min-height:100%;}
#main {padding-bottom: 54px;min-width:960px;}/* 必須使用和footer相同的高度,最小寬度ie6中加JS解決 */
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
position: relative;
margin-top: -54px; /* footer高度的負值 */
height: 54px;/* footer高度*/
width:100%;
min-width:960px;/*最小寬度ie6中加JS解決*/
clear:both;
background:#666;
text-align:center;
color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 auto;height:692px;}
#content p{line-height:30px;padding:0 30px;color:#fff;}
/*說明: 需要注意的就是#main的padding值、footer的高度和負margin值，需要保持一致。下面是著名的萬能float閉合Clearfix Hack*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
測試demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>彈性+固寬布局設計--建站學www.jzxue.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*本例中運用到一個永遠固定到頁尾的footer容器,這個層是獨立於主內容區的.*/
*{margin:0;padding:0;}
html, body, #wrapper {height: 100%;font-size:12px;}
#wrapper{width:100%;background:#777;}
body > #wrapper {height:auto; min-height:100%;}
#main {padding-bottom: 54px;min-width:960px;}/* 必須使用和footer相同的高度,最小寬度ie6中加JS解決 */
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
position: relative;
margin-top: -54px; /* footer高度的負值 */
height: 54px;/* footer高度*/
width:100%;
min-width:960px;/*最小寬度ie6中加JS解決*/
clear:both;
background:#666;
text-align:center;
color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 auto;height:692px;}
#content p{line-height:30px;padding:0 30px;color:#fff;}
/*說明: 需要注意的就是#main的padding值、footer的高度和負margin值，需要保持一致。下面是著名的萬能float閉合Clearfix Hack*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="wrapper">
<div id="main" class="clearfix">
<div id="header">
<div id="inheader">
<h3>彈性+固寬布局設計（適合寬屏和大背景布局）</h3>
<p>頁頭背景可平鋪整個瀏覽器寬度，而本文內容則始終置中顯示，不管分辯率是多大。</p>
</div>
</div>
<div id="content">
<p> </p>
<p>本文內容背景可平鋪整個瀏覽器寬度，你可以在body中加入一張超大的背景圖片，並設定圖片為置中。而本文內容則始終置中顯示，不管分辯率是多大。當你分辯率超過1024時，在本文內容的兩側會出現圖片，使寬屏的內容區兩側不顯得空洞。</p>
</div>
</div>
</div>
<div id="footer">
<div id="infoot">
<p>我是浮動的始終固定在底部的DIV,無論中間的文字內容高度是否不夠一屏，我還是能居底顯示，<a href="http://www.jzxue.com">網站製作教程</a></p>
<p>當中間內容超過一屏時，我又可以向下浮動喲</p>
</div>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
