Why Doesn't `overflow-x: hidden` Work on `` and `` in Mobile Browsers?-CSS Tutorial-php.cn

Why Doesn't `overflow-x: hidden` Work on `` and `` in Mobile Browsers?

Linda Hamilton

Release： 2024-12-10 11:45:14

Original

598 people have browsed it

Why Doesn't `overflow-x: hidden` Work on `` and `` in Mobile Browsers?

Resolving Overflowing Content in Mobile Browsers Despite 'overflow-x:hidden'

A user has encountered a puzzling issue where applying 'overflow-x:hidden' to the 'body' and 'html' elements fails to prevent content from overflowing beyond the viewable area in mobile browsers.

Upon examination, it is evident that mobile browsers appear to disregard overflow attributes applied to the top-level tags and disregard viewport settings defined in the 'meta name="viewport" content="..."' tag.

The solution lies in establishing a containment element within the 'body':

<body>
  <div>

Copy after login

By applying the 'overflow-x:hidden' style to the 'wrapper' div instead of the 'body' or 'html', the overflow is constrained within the wrapper, preventing it from extending beyond the viewport.

It is crucial to note that the 'wrapper' div may require an additional CSS property:

#wrapper {
  position: relative;
}

Copy after login

This additional styling ensures appropriate positioning of content within the wrapper. By implementing these changes, content is properly contained within the desired viewport, eliminating the undesired whitespace in mobile browsers.

The above is the detailed content of Why Doesn't `overflow-x: hidden` Work on `` and `` in Mobile Browsers?. For more information, please follow other related articles on the PHP Chinese website!