2 column + header + footer 樣版

從開始做網頁,我就喜歡這樣的版面配置了,以前是利用frame來達到我理像的樣式,後來越來越深入CSS後,就開始想用CSS來達到目標,我的目標其實很間單,就像大部分的同樣型式的網頁一樣,一個header在網頁頂端,一個footer在尾端,sidebar靠一邊,就像現在您看到的這個網頁一樣,只不過我還有另一個要求,那就是當主要內容和sidebar的高度都不及視窗高度時,footer不是緊接在較長那邊的下面,而是貼在視窗尾端。為了達到這樣的目標,我不知嘗試了多少次,不過每次都不成功。

不過前兩天看到mezzoblue那篇Friday Challenge後,我重新研究了一下box model的margin值,也才真正瞭解它在各種設定值下的不同狀況,尤其是負值時的狀況,以前我只是知道大概會怎樣,不過不是真正瞭解該如何用,而且事實上以前的認知也有些錯誤,過兩天我會針對margin值的使用法另外寫一篇文章介紹吧。

於是我根據新學得的知識和網路上找到的一些樣版為基礎,自己設計了一個能符合我需求的樣版,並且在IE(Internet Explorer) 6/WIN和FB(Mozilla FireBird) 0.7/WIN下測試都正常,樣版如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<title>2 column + header + footer 樣版</title>

<style>

body, html
{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
}

#outer
{
        width: 100%;
        height: 100%;
        margin-bottom: -100px; /* footer height */
        background-color: #ffc;
}

#top
{
        width: 100%;
        height: 50px;
        background-color: #f00;
}

#container
{
        width: 100%;
        margin-right: -100px; /* sidebar width */
        float: left;
}
#content
{
        margin-right: 100px; /* sidebar width */
        height: 700px;
        background-color:  #606;
}

#sidebar
{
        width: 100px; /* sidebar width */
        height: 500px;
        float: right;
        background-color:  #006;
}

#bottom
{
        height: 100px; /* footer height */
        width: 100%;
        clear: both;
        background-color:  #f66;
}

#b
{
        height: 100px; /* footer height */
        width: 100%;
        clear: both;
        background-color:  #00f;
}

</style>

</head>
<body>

<div id="outer">

        <div id="top">header content here</div>

        <div id="container">
                <div id="content">main content here</div>
        </div>

        <div id="sidebar">sidebar content here</div>

        <div id="b"></div>

</div>

<div id="bottom"></div>

</body>
</html>

不過有我個人認為還有幾個缺點,一是有一個空元素,id=b的那個,基本上我是不希望有這種情形的,不過它是讓IE和FB展現出來結果一樣的重要功臣,移走不可,所以我最後是在裡面加上<hr />。再來是footer的高度一定要先設定好,不能讓它自動決定(雖然說header也是這樣,不過對我來說footer裏的資料變動性會比較大)。除以上兩點外,我都很滿意,不過目前只有在上述的兩個環境下測試過,如果有人有其他環境的測試結果還請告知。

comments powered by Disqus