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

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: