要达到的效果是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也不管用。
看代码：
buttonA
查看更多关于手机html页面的垂直布局的基本框架_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114133