CSS 技巧 - 絕對位置、相對位置

阿恆

July 27, 2007

若果你要做一個網頁，左邊是一個固定寬度的選單，右邊是一個佔用所有餘下空間的主內容，兩邊的長度都剛好是瀏覽器視窗的高度，選單和主內容都會隨著視窗的大小而自動調整大小，不用 JavaScript 的話，你會怎麼做？

本來最直接的方法是寫一段 JavaScript，每次載入頁面或者變更瀏覽器大小之後，JavaScript 會從新調整 div 的高度，可惜這樣做我們要在window.innerHeight、document.documentElement.clientHeight、和 document.body.clientHeight 之間選擇合適的函數，也要考慮不同瀏覽器中事件處置器的不同使用方法，若果有純 CSS 的解決方案，並不用頭疼這些問題了。

Rob Swan 在他的網誌介紹了一個純 CSS 的解決方案，大部分人解決這個問題的方法是計算每一個 div 左上角的絕對座標，然後根據瀏覽器視窗的大小計算寬度和高度，從另一個角度看，我們也可以定義 div 上、下、左、右的空間，從而使 div 隨視窗大小而改變，例如以下的 CSS 語句：

1
2
3
4
5
6
7
#main {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

除了 IE 5 和 6 外，所有瀏覽器都能夠正確顯示 div，其中包括 IE 7，可惜現時仍然有大部分用戶使用 IE 5 和 6，放棄他們顯然並非明智之舉。在 IE 5 和 6 中，div 的寬度和長度可以透過表達式來表示，而非一個常數，這是 IE 的獨有功能，一般情況下很少人用，現在針對這兩個版本的瀏覽器，正好派上用場。CSS 中用表達式方法是：

1
2
3
#main {
    height:expression(document.body.clientHeight-20); /* 20 = botton space */
}

嚴格來說表達式也算是 JavaScript，所以若果瀏覽器沒有啟動 JavaScript 功能，甚麼也休提。

解決了 IE 和其他瀏覽器之間的分歧，我們便可以把所有東西合拼，首先是我們的 HTML 檔案：

1
2
3
4
<body>
<div id="side">Our side panel</div>
<div id="right">Our main panel</div>
</body>

我們的 CSS 要做的包括：

body 的高度和寬度定為 100%，這是 IE 所必須的，對其他瀏覽器來說雖然沒有用，但也沒有壞處。
把 html 和 body 的溢出部份隱藏，我們不希望看到瀏覽器的滾動棒。
把左邊選單和右邊主內容的溢出部份定為 auto，按內容的多少而自動顯示滾動棒。
左邊選單我們只需定義上、下、左邊的空間，與及固定寬度 200px。
右邊主內容我們定義上、下、左（左邊選單的寬度 + 間隔）、右邊的空間。

以上要求可以表達為以下的 CSS：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
html {
    overflow: hidden;
}
body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}<br />
#side {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    overflow: auto;
    width: 200px;
}
#main {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 20px;
    left: 240px;
    right: 20px;
    bottom: 20px;
    overflow: auto;
}

由於 IE 5 和 6 不理會 right 和 bottom 的數值，我們要另外想辦法告訴 IE 每一個 div 的寬度和高度，其中左邊選單（#side）已經有寬度的資料，尚欠高度，右邊主內容則兩項資料都欠缺，我們用條件注釋把這些資料加入 CSS 中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- [if lt IE 7]>
<style type="text/css">
#side {
    height : expression (document.body.clientHeight - 40);
}
#main {
    height : expression(document.body.clientHeight - 40);
    width : expression(document.body.clientWidth - 260);
}
</style>
<![endif]-->

請看 Rob Swan 製作的完成品。

必須注意 CSS 中的表達式是不合標準的，但我們至少把它們限制在必須使用的瀏覽器中，沒有干擾其他符合標準的瀏覽器。