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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
