HTML：将body按px分成上下两部分而不产生滚轴，并且两部分高度的和等于body的高度。_html/css_WEB-ITnose

要做这样的效果有两个原因：

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. 普通的设置底部菜单栏，没什么好解析的。