平衡主內容和側邊欄的高度

XHTML+CSS

如果設計網站的時候,主內容和側邊欄都有設底色或底圖時,當側邊欄和主內容長度不同時,會有不平衡的感覺。

像是Dan Cederholm示範的這張圖:

如果一直想朝著「偵測主內容和側邊欄區塊高度,並自動讓高度較大者的值等於高度較小者的高值」這種方向來找解法的話,可能會很複雜,這裡有個較簡單的技倆,可以說是用視覺上來欺騙人。

這個作法以及圖是轉自這篇文章,也就是「設定背景圖」。

這張圖顯示,其實整個背景是個橫條、長長的圖,並且repeat-y。在整體的背景設定這張圖之後,主內容和側邊欄就都不用設底圖了,像本站也是用這個方法。

這個概念顯示,其實若對CSS和網站layout了解更深的話,許多事情是可以很容易解決的呢!

回應

不用图片,有没有直接设背景色的方法?

似乎沒有辦法的說

發表新回應

這個欄位的內容會保密,不會公開顯示。 If you have a Gravatar account, used to display your avatar.
  • 自動將網址與電子郵件位址轉變為連結。
  • 可使用的 HTML 標籤:<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • 自動斷行和分段。

更多關於格式選項的資訊