Home >Web Front-end >CSS Tutorial >Why Isn't `overflow-x: hidden` Working on My Mobile Menu Bar?
Why Isn't `overflow-x: hidden` Working on My Mobile Menu Bar?
- DDDOriginal
- 2024-12-11 10:54:12426browse
Overflow-x:hidden Not Working in Mobile Browsers
In this issue, a website's black menu bar expands beyond the window edge in mobile browsers, despite applying overflow-x:hidden to the body. This excessive whitespace is unexplained and seemingly external to the HTML structure.
Solution:
To resolve this issue, the author suggests encapsulating the website content within a wrapper div and applying overflow-x:hidden to the wrapper instead of the body or html.
Apparently, browsers prioritize the viewport meta tag and ignore overflow attributes on html and body elements. By placing the overflow attribute within the wrapper div, the constraint is applied effectively, restricting content expansion. Additionally, adding position: relative to the wrapper div may also be necessary.
Example:
<body> <div>
#wrapper {
overflow-x: hidden;
position: relative;
}The above is the detailed content of Why Isn't `overflow-x: hidden` Working on My Mobile Menu Bar?. For more information, please follow other related articles on the PHP Chinese website!