您的位置: 首页  >  文章  >  基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）

基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）

分类: 文章 • 2024-02-17 13:59:10

之前写过一个小项目，首先这个页面布局是这个样子滴，举个栗子，京东的首页：

基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）

这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。

思前想后，后来我决定使用弹性布局去做，至少在手机浏览器中都是支持的，虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS，配合HTML5 history API还可以实现一个无刷新跳转，并且用户可点击前进后退和刷新页面。最近有遇到一个开发需求：单个H5页面，于是乎我干脆把之前写的小项目的CSS+HTML布局单拎出来，方便以后使用，其实实现方法很无聊很弱智：


首先是整个页面的骨架（HTML部分）：

[html] view plain copy
  1. <body>  
  2.   
  3.     <section class="page">  
  4.         <header class="header">  
  5.             我是头部  
  6.         </header>  
  7.         <section class="content">  
  8.             <div>asdasd</div>  
  9.         </section>  
  10.         <footer class="footer">  
  11.             <nav class="foot-nav">  
  12.                 <b>首页</b>  
  13.                 <b>其他</b>  
  14.                 <b>中心</b>  
  15.             </nav>  
  16.         </footer>  
  17.     </section>  
  18. </body>  



很简单，就是一个头（.header）、内容区（.content）、脚部（.footer），然后被一个.page包裹就实现了满屏，骨架超简单，在附上CSS实现：

[css] view plain copy
  1. /*清除手机的一些基本样式*/  
  2. html {  
  3.     font-size:62.5%;  
  4.     width:100%;  
  5.     height:100%;  
  6.     -webkit-font-smoothing:antialiased;  
  7. }  
  8. body {  
  9.     text-align:center;  
  10.     -webkit-user-select:none;  
  11.     width:100%;  
  12.     height:100%;  
  13.     /*background:#fff;*/   /*默认背景颜色*/  
  14.     /*font-size:1.2rem;*/   /*默认字体大小*/  
  15.     /*color: #000;*/   /*默认字体颜色*/  
  16.     font-family:"Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;  
  17.     -webkit-text-size-adjust:none;  
  18. }  
  19. * {  
  20.     margin:0;  
  21.     padding:0;  
  22.     list-style:none;  
  23. }  
  24. i, em, b {  
  25.     font-style:normal;  
  26.     font-weight:normal;  
  27. }  
  28. :-moz-placeholder {color:#ccc;}  
  29. ::-moz-placeholder {color:#ccc;}  
  30. ::-webkit-textarea-placeholder {color:#ccc;}  
  31. :-ms-textarea-placeholder {color:#ccc;}  
  32.   
  33. img{  
  34.     width:100%;  
  35.     vertical-align:top;  
  36. }  
  37. input,textarea,select{  
  38.     -webkit-appearance:none;  
  39.     font-size:1.2rem;  
  40.     border:0;  
  41.     background:transparent;  
  42.     font-family:"黑体","Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;  
  43.     outline:none;  
  44. }  
  45. input,a,span{  
  46.     -webkit-tap-highlight-color: rgba(0,0,0,0);  
  47. }  
  48.   
  49. /*flex最外框*/  
  50. .page{  
  51.     display:-webkit-box;  
  52.     -webkit-box-orient:vertical;  
  53.     height:100%;  
  54. }  
  55. /*flex内容区*/  
  56. .page .content{  
  57.     position:relative;  
  58.     -webkit-box-flex:1;  
  59.     -webkit-flex:1;  
  60.     flex:1;  
  61.     overflow:auto;  
  62.     -webkit-overflow-scrolling:touch;  
  63.   
  64.     background-color:#ccc;  
  65. }  
  66. /*flex头部*/  
  67. .header{  
  68.     display: -webkit-box;  
  69. }  
  70. .header *{  
  71.     display: block;  
  72. }  
  73. /*flex底部，按钮平均分布*/  
  74. .footer{  
  75.     overflow: hidden;  
  76.     background:#fff;  
  77. }  
  78. .foot-nav{  
  79.     display:-webkit-box;  
  80.     height: 2rem;  
  81.     line-height: 2rem;  
  82. }  
  83. .foot-nav *{  
  84.     display: block;  
  85.     -webkit-box-flex: 1;  
  86.     -webkit-flex:1;  
  87.     flex:1;  
  88. }  

就是上面一段CSS，就会被浏览器解析成这样：

基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）


头部和底部都是被子元素撑开的，并不用指定高度，，底部的button不管来几个也都是平均分布的，完全不用去计算一堆margin、padding以及position等等，弹性布局超赞有木有，当年的CSS2+HTML4时代要想实现这样的布局超麻烦有木有


然后再来个弹出层，一个简单的基于头尾固定的H5小页面就出来了：

[html] view plain copy
  1. <div class="layer-wraper">  
  2.     <div class="layer-inside">  
  3.         哈哈哈哈哈居中居中  
  4.         <p>呜呜呜呜</p>  
  5.     </div>  
  6. </div>  
[css] view plain copy
  1. /*弹出层样式(自动居中)*/  
  2. .layer-wraper{  
  3.     position:fixed;  
  4.     top:0;  
  5.     left:0;  
  6.     right:0;  
  7.     bottom:0;  
  8.     background:rgba(0,255,0,0.7);  
  9.     display:table;  
  10.     width:100%;  
  11.     height:100%;  
  12.     z-index:1000;  
  13. }  
  14. .layer-inside{  
  15.     display:table-cell;  
  16.     vertical-align:middle;  
  17. }  


使用table布局自动居中，并且这时使用fixed充满屏幕（百分比情况下fixed还算可靠），这样一个绿色的半透明背景并且自动居中的弹出层基本样式救出来了：

基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）


弹性布局大法好，应付一般的页面都不是问题，除非设计的脑子被僵尸吃了，硬要一些变态的需求以及狗shit一样的设计

相关推荐