百分比和固定寬度的混合布局

今天準備做下載站的分類策劃，在網上逛的時候，逛到了微軟下載中心這個網站。感覺很不錯，做得簡潔大方。平時有個小嗜好，就是看看網頁是怎樣布局的，于是用firefox
的web developer插件，將瀏覽器窗口調小，當分辨率調到800*600時，水平方向依然沒有出現滾動條。而網頁的主要內容區都沒有縮小，只是原來右邊的空白部分沒有了。以前在書上看過，有的設計師通過js檢測瀏覽器窗口的來改變布局。是不是也是通過js實現的呢。還是還是通過css的百分比布局就能實現呢。
     于是，用firebug查看它的首頁，一看，網頁里用了很多的表格。網頁的主要部分都是用表格布局的。我就想，作為微軟這樣知名的公司。為什么在現在這個css已經成為一種廣泛使用的語言而仍然使用如此廣受批評的表格布局呢。是不是要實現這種布局效果用css比較難以實現呢。
    “用表格能實現的，用css一定能實現，用css能實現的，用表格不一定能夠實現”一直記著這句話。于是，我產生了一種用css將微軟下載中心首頁重寫一遍的想法。下面是我重寫的方案：
     頭部：我用一個id為hd的div包圍了三個子div三個div分別是從上到下的三層。然后將對每一個子塊的元素分別設向左、向右浮動。并設固定像素的寬度。就能實現
     中部：左邊的側欄和右邊的主要內容欄。側欄的寬度是固定的181px。而主要內容欄要實現鋪平整個瀏覽器窗口的話，必須設百分比或em寬度，一般是百分比。
     尾部：用一個寬度為100%的div就可以了。
     問題抽出來了，就是怎樣實現百分比和固定寬度布局的問題：

       html可簡化為：

        <div id=”content”>
            <div id=”s_content”>s_content
            </div>
            <div id=”m_content”>m_content
            </div>
        </div>

設一下簡單的css樣式：

#content    {}{
            width:100%;
            height:500px;
        }
        #s_content{}{
            width:180px;
            height:500px;
            background-color:#ccc;
            float:left;
        }
        #m_content{}{
            width:100%;
height:500px; 
            background-color:#c4c9d6;
            float:left;
}

如果這樣的話，根本不可能實現s_content和m_content在同一水平線上。難道把#m_content的width屬性設為：100%-180px？在ie6和firefox2下都相當于沒有設定#m_content屬性一樣。當然，如果不設定m_content的width，當m_content里的內容寬度小于窗口右側的寬度時，可以在一條水平線上。如果大于的話，ie6會自動撐開m_content，firefox2中雖然不撐開，但是內容會跑到外面去。這都不是我們想要的。  
    這時，表格的作用就能夠發揮出來了。將原來的html代碼改為如下：

<div id=”content”>
    <table width="100%">
        <tr><td width="180px">
            <div id="s_content">
            s_content
            </div>
        </td>
        
        <td width="100%">
            <div id="m_content"> 
            m_content
            </div>
        </td>
        </tr>
    </table>
</div>
    這樣，不管你的顯示器分辨率是多少，網頁都能填滿整個寬度。而s_content的寬度是固定的。當然這只是使用表格實現固定寬度和百分比的原理。

     下面是我運用這個原理，將微軟下載中心的頁面框架搭建起來的網頁示例。有興趣的可下載下來看看。示例網頁