移動端H5網頁“上中下布局”的另類實現思路

記得曾經做過這樣的一個面試題，面試題要求如下：

1. 相冊空間\硬盤空間的進度條,考慮百分比的控制；
2. 左中右三欄等高，整個頁面的寬度不固定，左右寬度固定，中欄自寬度適應，論壇的文章標題也自適應寬；
3. 加“…”的地方，考慮過長溢出省略處理；
4. 假如這是一個訪問PV達2000W/日，因成本限制，網絡帶寬可能滿足不了此訪問量，會出現滯連情況，樣式文件可能加載不了，且中欄內容是最重要且要呈現在用戶眼前的。(也就是說,在無樣式不完全加載情況下,中欄內容要優先左右兩欄前)；
5. 關注標簽語義化；
6. 關注提交的頁面原型便於團隊合作，開發實現；
7. 關注HTTP請求和帶寬消耗所帶來的體驗和成本。

這幾點要求中，除了考察一個網頁的標簽語義化、頁面性能、開發技巧以外，頁面三欄等高布局、中間列優先加載應該算是開發過程當中的整個核心思路和決定整個頁面成敗的關鍵點。

關於三欄等高布局，網上已經有了舉不勝舉的實現方法和思路，且不說這些思路的好與壞，大家可以百度百度、谷歌谷歌，自作評價。

個人覺得各大互聯網公司做的比較好的三欄或者是兩欄布局有以下幾個站點：

• 大眾點評網首頁
• 天貓或者是淘寶產品詳細頁
• 朋友網
• 淘寶首頁第一屏
• 財付通賬戶首頁

當然兩欄或三欄布局，目前在各互聯網網站應用的實例非常之多，就不在此一一列舉。

在所有的這些案例當中，應用最多的一個css屬性非margin莫屬了，margin的值為“負值”。

 

有關margin負值，這里有篇經典文章：

負值之美：負margin在頁面布局中的應用

想必看完這篇文章，大家已經對負邊距有了更深一層次的認識。

於是得到了以下計算公式：

Margin負邊距 + 三欄等高布局 + 中間列優先加載 = 聖杯布局（業內盛傳的布局概念）的一部分。

 

在三列等高中間列優先加載的實現過程當中，嘗試再嘗試，最終沉淀出了以下“非公認的優秀代碼”：

html：

<div class="wrapper">

  <!–頭部 start–>
  <header>header</header>
  <!–頭部 end–>

  <!–主體內容 start–>
   <div class="main_1">
       <div class="main_2">
          <div class="main_3 cf">
              <!–中間列 start–>
              <section class="content">
                  <ul>
                      <li class="">
                          <a href="#">測試內容www.css3china.com</a>
                      </li>
                      <li class="">
                          <a href="#">測試內容www.css3china.com</a>
                      </li>
                      <li class="">
                          <a href="#">測試內容www.css3china.com</a>
                      </li>
                  </ul>
              </section>
              <!–中間列 end–>
              <!–左側邊欄 start–>
              <aside class="aside_l">
                  aside_l
              </aside>
              <!–左側邊欄 end–>
              <!–右側邊欄 start–>
              <aside class="aside_r">
                  aside_r
              </aside>
             <!–右側邊欄 end–>
          </div>
      </div>
  </div>
  <!–主體內容 end–>

  <!–底部導航版權 start–>

  <footer>footer</footer>
  <!–底部導航版權 end–>

 </div>

css：

html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
body{height:100%;background:#fff;min-width:600px;font:16px '微軟雅黑',Arial,Helvetica,sans-serif;}
img, a img, input{vertical-align:middle;}
img, a img, button {border:0;cursor:pointer;}
input, textarea{outline:none;-moz-outline:none;}
table, td ,th, tr{border-collapse:collapse;border:0;}
ul, ol, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
a{color:#333333;text-decoration:underline;}
/*****清除浮動*****/
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
.cf{display: inline-table;}
* html .cf{height:1%;}
.cf{display: block;}
/*****頭腳****/
header, footer{height:44px;background:#555555;line-height:44px;text-align:center;color:#FFFFFF;}
/*****三欄布局*****/
.main_1{background:#666666;padding-right:170px;}
.main_1 .main_2{background:#666666;padding-left:180px;}
.main_1 .main_3{background:#999;position:relative;}
.content, .aside_l, .aside_r{height:100%;float:left;position:relative;text-align:center;}
.aside_l, .aside_r{line-height:50px;}
/*****中間列*****/
.content{width:100%;}
.content ul{padding:10px;font-size:14px;line-height:22px;}
/*****左欄*****/
.aside_l{width:180px;left:-100%;margin-left:-180px;}
/*****右欄*****/
.aside_r{width:170px;margin-right:-170px;}

猛戳DEMO

同理在開發移動端webapp時，我們同樣需要面對各種布局以適應不同的產品需求，例如：上中下布局，曾經就是讓重構頭疼的一個問題。

關於webapp上中下布局，白樹給我們整理一篇非常有料的文章：

移動web頁面支持彈性滾動的3個方案

怎么樣，是不是像打了雞血一樣興奮，再也不用發愁移動端布局的事了！

 

接下來我為大家介紹一種新的實現移動端“上中下布局”的簡單思路，同理於聖杯布局（margin負邊距的巧妙應用）。

html：

<div class="container">
     <header class="header">header</header>
     <section class="main">
         <div class="wrapper" id="wrapper"><!–  iscroll  容器 –>
             <div class="con"><!–  iscroll  滾動層 –>
                 <ul class="list">
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                     <li><a class="" href="#">測試內容www.css3china.com</a></li>
                 </ul>
             </div>
         </div>
     </section>
     <footer class="footer">footer</footer>
 </div>

css：

html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
body{height:100%;background:#fff;min-width:600px;font:16px '微軟雅黑',Arial,Helvetica,sans-serif;overflow:hidden;}
img, a img, input{vertical-align:middle;}
img, a img, button {border:0;cursor:pointer;}
input, textarea{outline:none;-moz-outline:none;}
table, td ,th, tr{border-collapse:collapse;border:0;}
ul, ol, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
a{color:#333333;text-decoration:underline;}
.container{height:100%;}
.header{background:#555555;height:44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}
.main{background:#999999;height:100%;margin:-44px 0;padding:44px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.wrapper{height:100%;overflow-y:auto\9;position:relative;}
.wrapper .con{padding:10px;}
.footer{background:#555555;height:44px;margin-top:-44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}

chrome猛戳DEMO吧！ie猛戳DEMO吧！

代碼中標紅代碼為針對IE做的兼容，webkit內核使用iscroll插件實現滾動，IE使用瀏覽器默認滾動！

注意點：main的高度必須為整個網頁的高度，即為height:100%，所以需要繼承容器container{height:100%}的高度,container繼承body{height:100%;}的高度，以此類推。

最終使用margin負值和relative、z-index設置元素的位置和層級關系。從而使用純css實現了不用css3、不專門針對IE做特殊兼容處理的移動端“上中下布局”。

原文地址：http://www.css3china.com/?cat=16