#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”卷標會導致內容重疊。
測試用連結
#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
簡體中文轉換:
onestab
以下是填滿欄段用的
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.