div布局的自由伸展三欄式版面

2009-06-05　來源/作者：懶人圖庫　分類：網站常用　 «»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../www.w3.org/TR/xhtml1/DTD/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>自由伸展的三欄式版面</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=GB2312" /> 
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />

html {margin: 0; padding: 0;}

body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; 
  font-size: small; background: #ee8 repeat-y url(images/browncol.gif);}
/*** Image is 180px wide, and 20px high ***/

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}

a {color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}

/*******************************************************************************
                       Positioning rules
*******************************************************************************/
h1, h2 {
font-size: 22px;
margin: 0;
color: #040;
background-color: #c83;    /*** The header and footer have backgrounds, to cover the 2-tone body BG  ***/
border-top: 4px solid #000;
border-bottom: 5px solid #000;
padding: 3px 0 3px 1em;
}

h2 {background-color: #638; color: #fff;}

div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
color: #ee8;
padding-top: 10px;
}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #000;
border-right: 3px solid #000;
padding: 10px;
background-color: #dda;     /*** This div has a background to cover the 2-tone body BG ***/
}

div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px;     /*** IE5/mac will show a horizontal scrollbar 
		if this is less than 16px, or other units are used
		http://www.l-c-n.com/IE5tests/right_pos/ ***/           
width: 30%;
color: #820;
padding-top: 10px;
}

-->
</style>
</head>

<body>

<h1>
自由伸展的三欄式版面（Three Column Stretch）（頁首）
</h1>

<div class="000ugou" id="leftbox">
<pre>
#leftbox {
position: absolute;
left: 10px;
width: 180px(150px?);
}
</pre>

這個欄段的背景是利用 body 卷標設定的圖片，以垂直方向重復貼上所產生的。圖片的寬度和中間欄段的左邊界(margin)相等，高度為20px，這樣可以減少圖片重復的次數，加快演算上色的速度。


這一欄的內容(#leftbox)以絕對位置(absolutely positioned)的方式放在左邊的區域。另外因為底層背景圖片的尺寸限制，需要給定一個以像素作單位的“寬度(width)”值。


<a href="#">測試用連結</a>

</div>

<div class="mc20gak" id="rightbox"> 
<pre>
#rightbox {
position: absolute;
right: 2%;
width: 30%;
}

</pre>

這個欄段也能顯示“body”的背景，但是因為“body”的背景
圖片只在垂直方向重復，而且僅與中間欄段的左邊界同寬，所以這邊顯示的是“body”的背景顏色(background-color)。 
這個欄段的“寬度(width)”和右邊界的區域是用百分比作單位，你想用其它單位也可以。


如果頁面比 640px 還窄，中間和右邊欄段使用的“pre”卷標會導致內容重疊。


<a href="#">測試用連結</a>

</div>

<pre>
#middlebox { 
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}
</pre>

中間欄段有設定背景色，以便跟右邊欄段作區分。
這個欄段也需要補白(padding)和邊框(border)，不過因為沒有設定“寬度(width)”屬性，并不會觸發 IE5.x 的區塊模塊(box model)問題。


這個欄段也必須是最長的欄段，并且用你支持的最大分辨率(resolution)瀏覽時，仍要能夠延伸到檢視區(viewport)底端下方，否則“body”的背景就會在頁尾(footer)下方出現。

這整個范例沒有在任何欄段里宣告“高度(height)”屬性，這是為了避掉一些瀏覽器表現“高度(height)”屬性的獨特方式。
因為這些條件的限制，這個版面非常適合那些總是有很長的中間欄段的網頁，像是 weblogs。


頁首、頁尾和中間欄段是“固定的(static)”（或說“相對的(relative)”），而這三者一起定義了網頁的尺寸。你可以幫頁首和頁尾指定“高度(height)”。


在原始文件里，以絕對位置表示的 div#rightbox 放置在 div#leftbox 之后，
因此這些 div 的“top”屬性可以忽略。
這會讓它們待在它們該在的垂直方向起點，也就是說它們是固定的（直接連在固定的頁首下）。
所以如果頁首因為額外的內容擴大，三個欄段都會往下調整，這樣不是很棒嗎？


Mozilla 中，因為垂直方向的舍入誤差(rounding error)，在某些分辨率里，頁尾下方可能有 1px 的空隙，
<a href="mozshift.html">這個范例</a>描述得更詳細。

Nav4 中沒辦法使用像“div#leftbox”這類語法，所以請用“#leftbox”來代替。我的寫法只是為了要明確地表示。


致謝：再次感謝<a href="../../../www.l-c-n.com/default.htm">Philippe Wittenbergh</a>
，因為他的幫忙，讓這個范例更為完善。更感謝 
<a href="../../../www.mark.ac/help/default.htm">Mark Howells</a>
，因為他提供了最初的 body 背景點子。 


<a href="../../../users.rraz.net/mc_on_the_rocks/default.htm"
 title=" My mountain bike site ">Big John</a>

<a href="mailto:johnthebig66@yahoo.com" title="If you've found something new and
interesting to say about any CSS subject, please contact me. I want to know! ">e-mail</a> 
©positioniseverything 
最后更新日期： September 6, 2002 
Created August 24, 2002


<a href="../../../ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html" title="">繁體中文翻譯：</a>yyhuang 
簡體中文轉換: 
<a href="../../../www.onestab.net/default.htm">onestab</a>
 

以下是填滿欄段用的 
Why don't cannibals eat clowns? 
Answer: They taste funny. 
What is the difference between a lousy golfer and a lousy skydiver?

Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP! 
Did you hear about the geneticist that tried to cross a potato and a chicken? 
He wanted to produce a chicken that would definitely NOT cross the road, but instead, 
got a bunch of potatoes that sat around pecking eachother's eyes out. 
How many Psychiatrists does it take to change a light bulb? 
Answer: Only one, but the bulb has to really want to change. 
Why did the egg cross the road? 
Answer: It had an inclination.

</div>

<h2>
自由伸展的三欄式版面（Three Column Stretch）（頁尾）
</h2>

</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

自由伸展的三欄式版面,div布局，非絕對定位，IE,FireFox都OK.

標簽：網站常用