若果你要做一個網頁，左邊是一個固定寬度的選單，右邊是一個佔用所有餘下空間的主內容，兩邊的長度都剛好是瀏覽器視窗的高度，選單和主內容都會隨著視窗的大小而自動調整大小，不用 JavaScript 的話，你會怎麼做？
本來最直接的方法是寫一段 JavaScript，每次載入頁面或者變更瀏覽器大小之後，JavaScript 會從新調整 div 的高度，可惜這樣做我們要在window.innerHeight、document.documentElement.clientHeight、和 document.body.clientHeight 之間選擇合適的函數，也要考慮不同瀏覽器中事件處置器的不同使用方法，若果有純 CSS 的解決方案，並不用頭疼這些問題了。
Rob Swan 在他的網誌介紹了一個純 CSS 的解決方案，大部分人解決這個問題的方法是計算每一個 div 左上角的絕對座標，然後根據瀏覽器視窗的大小計算寬度和高度，從另一個角度看，我們也可以定義 div 上、下、左、右的空間，從而使 div 隨視窗大小而改變，例如以下的 CSS 語句：
| CSS | | copy code | | ? |
| 1 | #main { |
| 2 | position: absolute; |
| 3 | top: 20px; |
| 4 | left: 20px; |
| 5 | bottom: 20px; |
| 6 | right: 20px; |
| 7 | } |
除了 IE 5 和 6 外，所有瀏覽器都能夠正確顯示 div，其中包括 IE 7，可惜現時仍然有大部分用戶使用 IE 5 和 6，放棄他們顯然並非明智之舉。在 IE 5 和 6 中，div 的寬度和長度可以透過表達式來表示，而非一個常數，這是 IE 的獨有功能，一般情況下很少人用，現在針對這兩個版本的瀏覽器，正好派上用場。CSS 中用表達式方法是：
| CSS | | copy code | | ? |
| 1 | #main { |
| 2 | height:expression(document.body.clientHeight-20); /* 20 = botton space */ |
| 3 | } |
嚴格來說表達式也算是 JavaScript，所以若果瀏覽器沒有啟動 JavaScript 功能，甚麼也休提。
解決了 IE 和其他瀏覽器之間的分歧，我們便可以把所有東西合拼，首先是我們的 HTML 檔案：
| HTML | | copy code | | ? |
| 1 | <body> |
| 2 | <div id="side"> |
| 3 | <p>Our side panel</p> |
| 4 | </div> |
| 5 | <div id="right"> |
| 6 | <p>Our main panel</p> |
| 7 | </div> |
| 8 | </body> |
我們的 CSS 要做的包括：
- body 的高度和寬度定為 100%，這是 IE 所必須的，對其他瀏覽器來說雖然沒有用，但也沒有壞處。
- 把 html 和 body 的溢出部份隱藏，我們不希望看到瀏覽器的滾動棒。
- 把左邊選單和右邊主內容的溢出部份定為 auto，按內容的多少而自動顯示滾動棒。
- 左邊選單我們只需定義上、下、左邊的空間，與及固定寬度 200px。
- 右邊主內容我們定義上、下、左（左邊選單的寬度 + 間隔）、右邊的空間。
以上要求可以表達為以下的 CSS：
| CSS | | copy code | | ? |
| 01 | <style type=”text/css”> |
| 02 | html { |
| 03 | overflow: hidden; |
| 04 | } |
| 05 | body { |
| 06 | overflow: hidden; |
| 07 | padding: 0; |
| 08 | margin: 0; |
| 09 | width: 100%; |
| 10 | height: 100%; |
| 11 | } |
| 12 | #side { |
| 13 | padding: 0; |
| 14 | margin: 0; |
| 15 | position: absolute; |
| 16 | top: 20px; |
| 17 | left: 20px; |
| 18 | bottom: 20px; |
| 19 | overflow: auto; |
| 20 | width: 200px; |
| 21 | } |
| 22 | #main { |
| 23 | padding: 0; |
| 24 | margin: 0; |
| 25 | position: absolute; |
| 26 | top: 20px; |
| 27 | left: 240px; |
| 28 | right: 20px; |
| 29 | bottom: 20px; |
| 30 | overflow: auto; |
| 31 | } |
| 32 | </style> |
由於 IE 5 和 6 不理會 right 和 bottom 的數值，我們要另外想辦法告訴 IE 每一個 div 的寬度和高度，其中左邊選單（#side）已經有寬度的資料，尚欠高度，右邊主內容則兩項資料都欠缺，我們用條件注釋把這些資料加入 CSS 中：
| CSS | | copy code | | ? |
| 01 | <!--[if lt IE 7]> |
| 02 | <style type="text/css"> |
| 03 | #side { |
| 04 | height:expression(document.body.clientHeight-40); |
| 05 | } |
| 06 | #main { |
| 07 | height:expression(document.body.clientHeight-40); |
| 08 | width:expression(document.body.clientWidth-260); |
| 09 | } |
| 10 | </style> |
| 11 | <![endif]--> |
請看 Rob Swan 製作的完成品。
必須注意 CSS 中的表達式是不合標準的，但我們至少把它們限制在必須使用的瀏覽器中，沒有干擾其他符合標準的瀏覽器。
標籤: