HTML：将body按px分红上下两部分而不产生滚轴，而且两部分高度的和等于body的高度。

要作这样的效果有两个缘由：

1. 在移动端作web开发，下方的菜单栏通常是使用fixed定位：

将菜单栏固定在可见视窗的最底部。这种作法通常是没有问题的，可是在如下两种状况同时出现就会破坏布局：

1）内容过多而产生y轴滚轴；

2）内容区域有input等能够触发软键盘的标签。

一旦点击2）等标签触发软键盘，原来fixed就会失效，当屏幕拖动起来菜单栏也会跟着动起来；

固然，这个bug也是能够用另外一个更简单的办法解决（在个人另外一篇博文有详细的说明）

 

2. 若使用 1 中的布局方法，当内容足够多时，最底部的内容就会有一部分被底部的菜单遮挡住，固然也是能够经过添加：

的方法将被遮挡住的内容“挤”出来。

下面介绍怎么将body分红两部分：

 

先贴上源码再做解释(能一眼看懂，就不一样看下面的解释了)：

 

如下是解释（又不够完善的地方请指出）：

1.将body的高度设为可见屏幕的高度：

固然，你也能够经过如下方式上述要求：

可是，在作题目要求的效果时，不建议这样作，这样作是达不到题目要求的效果的。

 

设置padding-bottom:50px;是为了使main标签的height:100%;产生的效果是body的高度减去50px。

Tip：不要漏了width:100%;

 

2. 将内容放进body的子元素main标签，并经过overflow属性使用main溢出的内容能够经过滚轴的方式展现，添加-webit-overflow-scrolling属性可使拖动内容时更加顺滑，而不是原来的手指放开就当即中止滚动的生硬效果，将内容放进main标签中的最大缘由就是要解决上面提到的 1）问题，让发生 1）状况的时候不会影响到可见屏幕底部的菜单栏。

3. 普通的设置底部菜单栏，没什么好解析的。