移动端的界面中滚动条的显示

移动端的界面中滚动条的显示

第一种方式
将html和body的高度设置为100%；使他与屏幕的高度相同。

html{height: 100%;}

并将body设置为弹性
body{height:100%;display: flex; flex-direction: column;}
flex-direction: column;使主轴方向为垂直方向，起点在上沿。）

header设置为
flex-shrink:0;
(不让header伸缩)
（header 为页面的头部，为H5新增标签）

footer也设置为
flex-shrink:0;
（也不让footer伸缩）
（footer 为页面的尾部，为H5新增标签）

然后其余的中间内容（section里面的内容）让它显示滚动条，
section{overflow：auto；}
（overflow:auto;溢出内容显示为滚动条。 section是H5新增标签，表示部分独立内容。）

section{flex-shrink: 1;overflow: auto;}

整合如下：

html{height: 100%;}
body{height:100%;display: flex; flex-direction: column;}
header{flex-shrink:0;}
section{flex-shrink: 1;overflow: auto;}
footer{flex-shrink:0;}

注意：section是把中间要显示滚动条的区域全部包裹起来的标签。要是section只包裹其中要显示滚动条的一部分的内容，是不能正常显示滚动条的。

第二种方式

给头部header加position:fixed;把头部定位在页头，

header{position:fixed;top:0;left:0;}

给尾部footer加position:fixed;把头部定位在尾部，

footer{position:fixed;bottom:0;left:0;}

给中间的内容区加overflow:auto;

section{overflow:auto;}

注意：因为header加了position：fixed，后就脱离文档流。所以下面内容会上移，这个时候要给内容区加margin-top：值为header的高度。这样上移的内容就会正常显现出来。

整合如下：

header{position:fixed;top:0;left:0;}
section{overflow:auto;margin-top:"header 的高度"}
footer{position:fixed;bottom:0;left:0;}

缺点：滑动的时候头部和底部都会有滚动条，和微信显示不一样，所以第二种方式不推荐使用。第一种方式是一种标准显示滚动条的方式，建议使用。