gembin

          OSGi, Eclipse Equinox, ECF, Virgo, Gemini, Apache Felix, Karaf, Aires, Camel, Eclipse RCP

          HBase, Hadoop, ZooKeeper, Cassandra

          Flex4, AS3, Swiz framework, GraniteDS, BlazeDS etc.

          There is nothing that software can't fix. Unfortunately, there is also nothing that software can't completely fuck up. That gap is called talent.

          About Me

           

          網頁中三列自適應高度布局的實現

          網頁中三列自適應高度布局的實現

          三列的布局,一個固定寬度的左列是導航列,右列可以放Google Ads 或者 Flickr的像冊,自適應寬度的中間列是主要內容。

          特點:

          有一個自適應寬度的中間列與固定的寬度左右列。 
          中間列的主要內容首先出現在網頁中。 
          可以允許任一個列的內容為最高。 
          非常簡單的CSS和最少的Hacks。
          Step 1: 搭建結構

          先從header, footer, and container開始.

          <div id="header"></div> 
          <div id="container"></div> 
          <div id="footer"></div>

           

          給Container 一個左右方向的內補丁,其寬度相當于左右列的寬度.

          #container { 
          padding-left: 200px; /* LC width */ 
          padding-right: 150px; /* RC width */ 
          }

           現在的布局如下圖:



          在已有布局基礎上加再左、中、右列



          <div id="header"></div>  
            <div id="container">  
            <div id="center" class="column"></div>  
            <div id="left" class="column"></div>  
            <div id="right" class="column"></div>  
            </div>  
          <div id="footer"></div> 


          然后加寬度和浮動,底部的Footer須清除浮動,使其保持在最下面。.


          #container .column {  
          float: left;  
          }  
          #center {  
          width: 100%;  
          }  
          #left {  
          width: 200px; /* LC width */  
          }  
          #right {  
          width: 150px; /* RC width */  
          }  
          #footer {  
          clear: both;  


          現在的代碼運行的結果如下圖,由于#container的左右填充和#center100%的緣故,左列和右列被擠到#center的下面,這不是我們想要的結果。


          Step 3: 給左欄定位

          采取二步給這個左欄定位,首先給左欄一個-100%的左邊界,相當于中間欄的寬度,此時,左欄和中間欄重合,共享它的左邊緣,如下圖。



          #left {  
          width: 200px; /* LC width */  
          margin-left: -100%;  
          }

          然后采用相對定位的辦法將左欄定位到距右邊200PX的地方(也就是左欄的寬度)。



          #container .columns {  
          float: left;  
          position: relative;  
          }  
          #left {  
          width: 200px; /* LC width */  
          margin-left: -100%;  
          right: 200px; /* LC width */  


          現在左欄的位置正好是#container的左內補丁。

          Step 4: 給右欄定位

          將右欄定位于#container的右內補丁位置,只要設定右欄的負右邊界就可。



          #right {  
          width: 150px; /* RC width */  
          margin-right: -150px; /* RC width */  


          現在布局中的空白區域已消失。

           Step 5:最后的完善

          至此,布局已基本完成,但如果瀏覽器的最小尺寸比中心寬度小,那么左列將變的很小,所以要設定個最小寬度,可惜IE現在還不支持。800x600沒問題



          body {  
          min-width: 550px; /* 2x LC width + RC width */  

          第四步完成的代碼在IE里左欄會消失,現在要做的是把左欄定到它正確的位置上去。



          * html #left {  
          left: 150px; /* RC width */  

          內容的邊距

          我們需要給內容一個內補丁(10PX),否則的話,文本都頂著邊。

          列的總寬度等于(padding+width)。



          #left {  
          width: 180px; /* LC fullwidth - padding */  
          padding: 0 10px;  
          right: 200px; /* LC fullwidth */  
          margin-left: -100%;  

          對IE5.x,應該用個hacks



          body {  
          min-width: 630px; /* 2x (LC fullwidth +  
          CC padding) + RC fullwidth */  
          }  
          #container {  
          padding-left: 200px; /* LC fullwidth */  
          padding-right: 190px; /* RC fullwidth + CC padding */  
          }  
          #container .column {  
          position: relative;  
          float: left;  
          }  
          #center {  
          padding: 10px 20px; /* CC padding */  
          width: 100%;  
          }  
          #left {  
          width: 180px; /* LC width */  
          padding: 0 10px; /* LC padding */  
          right: 240px; /* LC fullwidth + CC padding */  
          margin-left: -100%;  
          }  
          #right {  
          width: 130px; /* RC width */  
          padding: 0 10px; /* RC padding */  
          margin-right: -190px; /* RC fullwidth + CC padding */  
          }  
          #footer {  
          clear: both;  
          }  
          /*** IE Fix ***/  
          * html #left {  
          left: 150px; /* RC fullwidth */  

          高度自適應



          #container {  
          overflow: hidden;  
          }  
          #container .column {  
          padding-bottom: 20010px; /* X + padding-bottom */  
          margin-bottom: -20000px; /* X */  
          }  
          #footer {  
          position: relative;  

          這個代碼起源于adapted wholesale。

          遺憾的是現在Opera還不支持#container的overflow,期待版本9。

          現在IE還不能真正的自適應高度,還要加下面的代碼,如果你需要#footer,可再加個DIV(#footer外面)。



          <div id="footer-wrapper">  
            <div id="footer"></div>  
          </div> 


          * html body {  
          overflow: hidden;  
          }  
          * html #footer-wrapper {  
          float: left;  
          position: relative;  
          width: 100%;  
          padding-bottom: 10010px;  
          margin-bottom: -10000px;  
          background: #fff; /* Same as body  
          background */  

          posted on 2008-03-26 14:21 gembin 閱讀(479) 評論(0)  編輯  收藏 所屬分類: CSS

          導航

          統計

          常用鏈接

          留言簿(6)

          隨筆分類(440)

          隨筆檔案(378)

          文章檔案(6)

          新聞檔案(1)

          相冊

          收藏夾(9)

          Adobe

          Android

          AS3

          Blog-Links

          Build

          Design Pattern

          Eclipse

          Favorite Links

          Flickr

          Game Dev

          HBase

          Identity Management

          IT resources

          JEE

          Language

          OpenID

          OSGi

          SOA

          Version Control

          最新隨筆

          搜索

          積分與排名

          最新評論

          閱讀排行榜

          評論排行榜

          free counters
          主站蜘蛛池模板: 郑州市| 西畴县| 三穗县| 定远县| 乌兰浩特市| 乌拉特中旗| 色达县| 永仁县| 阳泉市| 西充县| 江川县| 河东区| 永春县| 济源市| 龙陵县| 岳阳市| 海口市| 吉水县| 闽清县| 临泉县| 玛曲县| 塘沽区| 绥阳县| 平原县| 平山县| 永仁县| 土默特左旗| 崇左市| 宜春市| 达州市| 浮梁县| 房山区| 郧西县| 昂仁县| 库伦旗| 古蔺县| 浮山县| 瑞金市| 四川省| 合水县| 霸州市|