2 column + header + footer 樣版 : O3noBLOG

01月 30日

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裏的資料變動性會比較大）。除以上兩點外，我都很滿意，不過目前只有在上述的兩個環境下測試過，如果有人有其他環境的測試結果還請告知。

單篇彙整