The problem that the mobile terminal element is located outside the visible area of the page and the excess part is hidden outside the visible area

Source: Internet
Author: User

The problem that the mobile terminal element is located outside the visible area of the page and the excess part is hidden outside the visible area

The following problem occurs during PC-side and mobile-side pages:

When you set the width and height of the body to 100%, you can use absolute positioning to position the element outside the page. Then, you can run the element to the page as an animation based on different situations, set overflow: hidden for the body. When the PC side page is accessed, the elements are not outside the page, and no scroll bar is displayed. However, it is invalid when the mobile side page is moved. by sliding the screen, you can also display the elements located outside the page, so that the hidden elements cannot be exceeded;

The following two methods can be used to solve this problem on mobile terminals:

I. Change the Positioning Method

Set the width and height of 100% for the body and the overflow: hidden remains unchanged. The change is to use position: fixed to locate the elements that need to be hidden beyond the visible area;

<! DOCTYPE html> 

 

2. Add a div package

Add a div with a width and height of 100% to the body and set overflow: hidden for this div. Then, you need to refer to this div to locate the hidden elements beyond the visible area;

<! DOCTYPE html> 

/** I hope you will be informed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.