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

#leftbox {
position: absolute;
left: 10px;
width: 180px(150px?);
}

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

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

測試用連結 

#rightbox {
position: absolute;
right: 2%;
width: 30%;
}

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

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

測試用連結

返回 p.i.e. 
#middlebox { 
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}

中間欄段有設定背景色，以便跟右邊欄段作區分。 這個欄段也需要補白(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 的空隙， 這個範例描述得更詳細。

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

致謝：再次感謝Philippe Wittenbergh ，因為他的幫忙，讓這個範例更為完善。更感謝 Mark Howells ，因為他提供了最初的 body 背景點子。

Big John   e-mail ©positioniseverything
最後更新日期： September 6, 2002
Created August 24, 2002

中文翻譯:
yyhuang  
Creative Commons License

以下是填滿欄段用的

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.

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