手机html页面的垂直布局的基本框架

lavor 发布于2019-08-30 12:45 / 1610人阅读

摘要：第一，弹性布局有一新一旧两个版本，当然想用新版本，可是版的微信不支持，好在和主流的浏览器也都支持老版本，所以就先用老版本吧只是做了简单的兼容测试。

手机页面的一种典型布局方式为：头（header）、主体（main）和底（footer），头和底放一些常用的操作，主体部分显示内容，如下图：

要达到的效果是header固定在头部，footer固定在底部，主体部分可以滚动，实现的思路有如下几种：

1、固定位置（fixed）
利用CSS的position:fixed是最直接的方式，分别将header和footer固定在窗口的顶和底。虽然这种方式最简单直接，但是存在两个问题：1、中间的主体部分必须为header和footer预留出空间，否则内容就会被盖住。如果header和footer的高度已知且固定，可以通过给主体设置margin解决。如果不是已知的就麻烦了，必须要借助js进行计算才行，因此这种方式的的灵活性不够；2、在iOS环境下，如果页面上有input空间，输入时调用软键盘会导致fixed失效，footer显示的位置就乱了（android下没有问题）。所以，fixed方式虽然看似简单，用起来问题不少。

2、绝对位置（absolute）
采用绝对定位就是把header，main和footer都用absolute放在固定的位置上，让main支持自动滚动，这样内容多的时候滚动只发生在main里面，header和footer的位置固定。这种方式的局限是必须确定header和footer的高度，如果不确定需要借助js，灵活性不够。

3、弹性位置（flex）
弹性布局可以根据容器的情况和设置的规则自动调整子元素的大小，非常适合解决垂直布局的问题。但是，也有不少坑。第一，弹性布局有一新（display:flex）一旧（display:box）两个版本，当然想用新版本，可是android版的微信不支持，好在ios和主流的浏览器也都支持老版本，所以就先用老版本吧（只是做了简单的兼容测试）。第二，当main区域需要滚屏的时候，androi版的微信会导致footer里的button不能响应点击事件，直到滚屏到底，才行，似乎是main把footer覆盖了（footer一直可见），设置了z-index也不管用。

看代码：

.flex-frame{height:100%;width:100%;background:#eff;display:-webkit-box;-webkit-box-orient:vertical;}
.flex-bar{display:-webkit-box;padding:4px;background:#eee;}
.flex-bar>button{display:block;-webkit-box-flex:1.0;margin-left:4px;}
.flex-bar>button:first-child{margin-left:0;}
.flex-main{position:relative;background:#ccc;-webkit-box-flex:1.0;overflow-y:hidden;padding-bottom:80px;}
.flex-main-wrap{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto;}

var data = [], i = 0;
while (i<30) {
     data.push("row:" + i);
     i++;
}
$scope.data = data;
$scope.click = function(event, name) {
     alert("click " + name);
}

看例子

PS：
1、本来想用main标签，发现微信的浏览器不认识main标签，就直接用div了。
2、微信里如果main区域需要滚屏，footer似乎就会被盖住，无法响应点击事件，不知道确切的原因是什么，找到下面这段话不知道是不是原因。
When the computed value for the overflow property is ‘visible’, ‘scroll’ or ‘auto’, the content may overflow the container. If the computed value for direction is normal, the content will overflow over the right or bottom side. If the computed value for direction is reverse, the content will overflow over the left or top side.
为了解决这个问题，加了flex-main-wrap进行控制。

参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

云服务器服务器托管 html框架布局 html开源框架布局 html的布局 html页面布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115033.html

手机html页面的垂直布局的基本框架

摘要：第一，弹性布局有一新一旧两个版本，当然想用新版本，可是版的微信不支持，好在和主流的浏览器也都支持老版本，所以就先用老版本吧只是做了简单的兼容测试。手机页面的一种典型布局方式为：头（header）、主体（main）和底（footer），头和底放一些常用的操作，主体部分显示内容，如下图：showImg(https://segmentfault.com/img/bVstLo);要达到的效果...

CatalpaFlat 2019-08-01 15:03 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
响应式布局方案

摘要：说到响应式布局方案，我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门针对端的页面，在这种情况下页面会被严重压缩，而且会极大的影响页面的结构和布局，为了解决这个问题，苹说到响应式布局方案，我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门...

lowett 2019-08-30 15:55 评论0 收藏0
响应式布局方案

摘要：说到响应式布局方案，我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门针对端的页面，在这种情况下页面会被严重压缩，而且会极大的影响页面的结构和布局，为了解决这个问题，苹说到响应式布局方案，我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门...

EasonTyler 2019-08-23 15:15 评论0 收藏0
响应式布局方案

摘要：说到响应式布局方案，我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门针对端的页面，在这种情况下页面会被严重压缩，而且会极大的影响页面的结构和布局，为了解决这个问题，苹说到响应式布局方案，我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门...

tracy 2019-08-02 14:15 评论0 收藏0