移动端H5网页“上中下布局”的另类实现思路

记得曾经做过这样的一个面试题，面试题要求如下：

1. 相册空间\硬盘空间的进度条,考虑百分比的控制；
2. 左中右三栏等高，整个页面的宽度不固定，左右宽度固定，中栏自宽度适应，论坛的文章标题也自适应宽；
3. 加“…”的地方，考虑过长溢出省略处理；
4. 假如这是一个访问PV达2000W/日，因成本限制，网络带宽可能满足不了此访问量，会出现滞连情况，样式文件可能加载不了，且中栏内容是最重要且要呈现在用户眼前的。(也就是说,在无样式不完全加载情况下,中栏内容要优先左右两栏前)；
5. 关注标签语义化；
6. 关注提交的页面原型便于团队合作，开发实现；
7. 关注HTTP请求和带宽消耗所带来的体验和成本。

这几点要求中，除了考察一个网页的标签语义化、页面性能、开发技巧以外，页面三栏等高布局、中间列优先加载应该算是开发过程当中的整个核心思路和决定整个页面成败的关键点。

关于三栏等高布局，网上已经有了举不胜举的实现方法和思路，且不说这些思路的好与坏，大家可以百度百度、谷歌谷歌，自作评价。

个人觉得各大互联网公司做的比较好的三栏或者是两栏布局有以下几个站点：

• 大众点评网首页
• 天猫或者是淘宝产品详细页
• 朋友网
• 淘宝首页第一屏
• 财付通账户首页

当然两栏或三栏布局，目前在各互联网网站应用的实例非常之多，就不在此一一列举。

在所有的这些案例当中，应用最多的一个css属性非margin莫属了，margin的值为“负值”。

 

有关margin负值，这里有篇经典文章：

负值之美：负margin在页面布局中的应用

想必看完这篇文章，大家已经对负边距有了更深一层次的认识。

于是得到了以下计算公式：

Margin负边距 + 三栏等高布局 + 中间列优先加载 = 圣杯布局（业内盛传的布局概念）的一部分。

 

在三列等高中间列优先加载的实现过程当中，尝试再尝试，最终沉淀出了以下“非公认的优秀代码”：

html：

 1 <div class="wrapper">
 2 
 3   –头部 start–>
 4   <header>headerheader>
 5   –头部 end–>
 6 
 7   –主体内容 start–>
 8    <div class="main_1">
 9        <div class="main_2">
10           <div class="main_3 cf">
11               –中间列 start–>
12               <section class="content">
13                   <ul>
14                       <li class="">
15                           <a href="#">测试内容www.css3china.coma>
16                       li>
17                       <li class="">
18                           <a href="#">测试内容www.css3china.coma>
19                       li>
20                       <li class="">
21                           <a href="#">测试内容www.css3china.coma>
22                       li>
23                   ul>
24               section>
25               –中间列 end–>
26               –左侧边栏 start–>
27               <aside class="aside_l">
28                   aside_l
29               aside>
30               –左侧边栏 end–>
31               –右侧边栏 start–>
32               <aside class="aside_r">
33                   aside_r
34               aside>
35              –右侧边栏 end–>
36           div>
37       div>
38   div>
39   –主体内容 end–>
40 
41   –底部导航版权 start–>
42 
43   <footer>footerfooter>
44   –底部导航版权 end–>
45 
46  div>

css：

 1 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;}
 2 html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
 3 body{height:100%;background:#fff;min-width:600px;font:16px '微软雅黑',Arial,Helvetica,sans-serif;}
 4 img, a img, input{vertical-align:middle;}
 5 img, a img, button {border:0;cursor:pointer;}
 6 input, textarea{outline:none;-moz-outline:none;}
 7 table, td ,th, tr{border-collapse:collapse;border:0;}
 8 ul, ol, li{list-style:none;}
 9 h1,h2,h3,h4,h5,h6{font-size:12px;}
10 a{color:#333333;text-decoration:underline;}
11 /*****清除浮动*****/
12 .cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
13 .cf{display: inline-table;}
14 * html .cf{height:1%;}
15 .cf{display: block;}
16 /*****头脚****/
17 header, footer{height:44px;background:#555555;line-height:44px;text-align:center;color:#FFFFFF;}
18 /*****三栏布局*****/
19 .main_1{background:#666666;padding-right:170px;}
20 .main_1 .main_2{background:#666666;padding-left:180px;}
21 .main_1 .main_3{background:#999;position:relative;}
22 .content, .aside_l, .aside_r{height:100%;float:left;position:relative;text-align:center;}
23 .aside_l, .aside_r{line-height:50px;}
24 /*****中间列*****/
25 .content{width:100%;}
26 .content ul{padding:10px;font-size:14px;line-height:22px;}
27 /*****左栏*****/
28 .aside_l{width:180px;left:-100%;margin-left:-180px;}
29 /*****右栏*****/
30 .aside_r{width:170px;margin-right:-170px;}

猛戳DEMO

同理在开发移动端webapp时，我们同样需要面对各种布局以适应不同的产品需求，例如：上中下布局，曾经就是让重构头疼的一个问题。

关于webapp上中下布局，白树给我们整理一篇非常有料的文章：

移动web页面支持弹性滚动的3个方案

怎么样，是不是像打了鸡血一样兴奋，再也不用发愁移动端布局的事了！

 

接下来我为大家介绍一种新的实现移动端“上中下布局”的简单思路，同理于圣杯布局（margin负边距的巧妙应用）。

html：

 1 <div class="container">
 2      <header class="header">headerheader>
 3      <section class="main">
 4          <div class="wrapper" id="wrapper">–  iscroll  容器 –>
 5              <div class="con">–  iscroll  滚动层 –>
 6                  <ul class="list">
 7                      <li><a class="" href="#">测试内容www.css3china.coma>li>
 8                      <li><a class="" href="#">测试内容www.css3china.coma>li>
 9                      <li><a class="" href="#">测试内容www.css3china.coma>li>
10                      <li><a class="" href="#">测试内容www.css3china.coma>li>
11                      <li><a class="" href="#">测试内容www.css3china.coma>li>
12                      <li><a class="" href="#">测试内容www.css3china.coma>li>
13                      <li><a class="" href="#">测试内容www.css3china.coma>li>
14                      <li><a class="" href="#">测试内容www.css3china.coma>li>
15                      <li><a class="" href="#">测试内容www.css3china.coma>li>
16                      <li><a class="" href="#">测试内容www.css3china.coma>li>
17                      <li><a class="" href="#">测试内容www.css3china.coma>li>
18                      <li><a class="" href="#">测试内容www.css3china.coma>li>
19                      <li><a class="" href="#">测试内容www.css3china.coma>li>
20                      <li><a class="" href="#">测试内容www.css3china.coma>li>
21                      <li><a class="" href="#">测试内容www.css3china.coma>li>
22                      <li><a class="" href="#">测试内容www.css3china.coma>li>
23                      <li><a class="" href="#">测试内容www.css3china.coma>li>
24                  ul>
25              div>
26          div>
27      section>
28      <footer class="footer">footerfooter>
29  div>

css：

 1 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;}
 2 html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
 3 body{height:100%;background:#fff;min-width:600px;font:16px '微软雅黑',Arial,Helvetica,sans-serif;overflow:hidden;}
 4 img, a img, input{vertical-align:middle;}
 5 img, a img, button {border:0;cursor:pointer;}
 6 input, textarea{outline:none;-moz-outline:none;}
 7 table, td ,th, tr{border-collapse:collapse;border:0;}
 8 ul, ol, li{list-style:none;}
 9 h1,h2,h3,h4,h5,h6{font-size:12px;}
10 a{color:#333333;text-decoration:underline;}
11 .container{height:100%;}
12 .header{background:#555555;height:44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}
13 .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;}
14 .wrapper{height:100%;overflow-y:auto\9;position:relative;}
15 .wrapper .con{padding:10px;}
16 .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

转载于:https://www.cnblogs.com/css3China/p/3691804.html