php 网页分成上下两部分,HTML:将body按px分成上下两部分而不产生滚轴,并且两部分高度的和等于body的高度。...

本文探讨了在移动端Web开发中,使用fixed定位的菜单栏在内容过多和触发软键盘时可能出现的布局问题。解决方案包括将body高度设置为屏幕高度,使用main标签管理内容并设置overflow属性,以及如何避免底部菜单遮挡内容。通过这些方法,可以确保菜单栏在触发软键盘时保持固定,同时内容能够完整显示。
摘要由CSDN通过智能技术生成

d91ea69e4ef713ad9e8e143bd50c983b.png

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

1. 在移动端做web开发,下方的菜单栏一般是使用fixed定位:

7852ca18f4049fdf377e165bf6e3e662.png

将菜单栏固定在可见视窗的最底部。这种做法一般是没有问题的,但是在以下两种情况同时出现就会破坏布局:

1)内容过多而产生y轴滚轴;

2)内容区域有input等可以触发软键盘的标签。

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

当然,这个bug也是可以用另一个更简单的办法解决(在我的另一篇博文有详细的说明)

2. 若使用 1 中的布局方法,当内容足够多时,最底部的内容就会有一部分被底部的菜单遮挡住,当然也是可以通过添加:

f263710f84282de64eb7fd62af19e3aa.png

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

下面介绍怎么将body分成两部分:

先贴上源码再作解释(能一眼看懂,就不同看下面的解释了):

8fd1bf713be25b142909c4a31d370edb.png

以下是解释(又不够完善的地方请指出):

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

b1addf43cb904ec91f9bd9f40af11aff.png

当然,你也可以通过以下方式上述要求:

56a46fcce9a8f8be65f890c8d324169e.png

但是,在做题目要求的效果时,不建议这样做,这样做是达不到题目要求的效果的。

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

Tip:不要漏了width:100%;

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

30a9610e634ba9245b86c04eb59c1d2c.png

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值