CSS 的動態欄寬配置

如果你使用的螢幕顯示寬度超過 1024px 的人,在逛本網站的時候,可能會發現我的寬度是可動的。
只是這可動的寬度變化只有主區塊的部分,也就是顯示文章內容的部分。而側邊欄位就是乖乖的固定在某一個寬度下不會動。這樣可以彈性的隨螢幕的大小而變更寬度,讓文章區塊不會過小而顯得浪費板面。而側邊欄位,因為主要是一些圖片或簡易的訊息,所以固定寬度才不會顯得空蕩蕩的沒有內容。

但是,之前遇到了一個問題,就是當主區塊比較短而側邊欄比較長的時候,底部的區塊無法順利的往下。會導致側邊與底部重疊再一起。

先說一下我網站原本的欄位配置吧!

<div id="wrapper">
	<div id="header">頭部區塊</div>
	<div id="center">文章區塊</div>
	<div id="sidebar">側邊區塊</div>
	<div id="footer">底部區塊</div>
</div>

搭配上的CSS內容為

#wrapper {
	background: #fff;
	position: relative;
	min-width: 960px;
	max-width: 1400px;
	margin: 0 auto;
}
#header {
	background: #ccc;
}
#center {
	background: #aaa;
	margin-right: 350px;
}
#sidebar {
	background: #bbb;
	width: 350px;
	right: 0;
	top: 20px;
	position: absolute;
}
#footer {
	background: #ccc;
}

在 #wrapper 中,利用 min-width 限制最小寬度,以免文章區塊壓縮變成一個細條狀,而設定 max-width 以免超寬的螢幕設定,讓區塊無限的左右延伸。
#center 利用 margin-right:350px 設定空出側邊欄的位址來。
#sidebar 指定寬度,利用 position:absolute 的特性,讓他可以重疊在 #center 上面,而 right:0 是讓他靠右擺放,top的數值則是根據上方區塊來指定的。
其實這時還有一個問題,就是頭部區塊的高度要固定才可以,還好我的配置上就是這樣沒有問題。

但是就如同這一個範例所是,當側欄的高度較大的時候,會發生重疊的問題。
這一切都是因為 position:absolute 的關係,讓側邊欄完全是浮在頁面之上,無法與其他元素作互動。
當時我上網搜尋解答,一直沒有找到純 CSS 的解決辦法。看到的解決方案都是搭配 javascript 來做動態的調整。但是我不想要在這問題上使用 javascript 來解決,而是單純的利用 CSS 來解決,以免比較注重安全的人看不到東西。
但是缺因為這樣一直擱置了問題,真的很不應該。

後來看到了 跳出盒子思考——CSS布局 這一篇文章,整個人大為開心,因為他提供了很棒的思考方式。
也解決了我的問題,只是我在最後的程式碼上,跟他採用的有些不一樣,最主要還是因為不同瀏覽器解讀 CSS 的不同導致的。

在 html 上有做了一些小修正,多加了一個 centermain 區塊,因此區塊配置為

<div id="wrapper">
	<div id="header">頭部區塊</div>
	<div id="centermain">
		<div id="center">文章區塊</div>
		<div id="sidebar">側邊區塊</div>
	</div>
	<div id="footer">底部區塊</div>
</div>

相對應的 CSS 也做了些修正

#wrapper {
	background: #fff;
	min-width: 960px;
	max-width: 1400px;
	margin: 0 auto;
}
#header {
	background: #ccc;
}
#centermain {
	padding-right: 350px;
	_height: 1%;
}
#center {
	background: #aaa;
	width: 100%;
	margin-right: -350px;
	float: left;
}
#sidebar {
	background: #bbb;
	width: 350px;
	margin-right: -350px;
	float: right;
	_margin-right: -175px;
}
#footer {
	background: #ccc;
	clear: both;
}

這裡多加了 centermain 區塊,是因為要讓接下來的 center 區塊,在設定 width:100% 的時候,能讓寬度自動的扣除側邊欄的寬度。
比較注意的一點是,我在 centermain 中加了 _height:1% 這樣的 css hack 技巧,是因為在 IE6 的時候如果不指定的高度的話,會導致頭部區塊無法顯示。
然後到了 sidebar 區塊,因為目前位子,會因為 centermain 設定的關係重疊在 center 上面,所以設定 margin-right:-350px 來讓側邊欄為浮動出去他原本應該的位址。同時因為 IE6 的問題又要特別設定啦,浮動一半的寬度及可。

果真,很多時候需要彈性的思考,問題就可以解決了。
不過彈性思考真的不是那麼容易,特別是你針對這問題已經想了很久才想出一個有缺陷的答案之時,你會困在自己這些時日的思考邏輯中,無法跳脫現有的框架來重新彈性思考問題。
轉個彎,答案就出來了。

小咪看不出來有差耶
來試留言一下!!~ ^///^

現在看到的已經是修改過的樣式啦!
以前是要主要區塊較短的時候才會看出有差異!~~

羊咩

好棒的分享!!!

感謝感謝!!~~
大家喜歡就是最棒的一件事情~

TOm

学到了很多东西,思路很奇妙!谢谢!

有幫助到你就是最好的事情了

gigi

请问richer, 这篇文章有提供他人无条件发布吗?
因为看到一模一样的文章, 复制贴上, 而且在该文没看到他提及转载出处…疑为盗用!…
http://sagirl1224.blogspot.tw/2013/08/css.html

感謝通知~
不過我剛連結過去已經看不到該文章了~