Overflow-x:hidden doesn't prevent content from-第2页回答

I have a website here.

Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden.

In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags.

Even if I set the viewport to a specific width in the <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

The site expands to the 1100px but still has the whitespace beyond the 1100.

What am I missing? How do I keep the viewport to 1100 and cut off the overflow?

标签： css overflow viewport mobile-browser

15条回答

大哥的爱人

2楼-- · 2019-01-02 20:10

As @Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport"> tag.

To solve this problem at the source, try the following:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

In my tests this prevents the user from zooming out to view the overflowed content, and as a result prevents panning/scrolling to it as well.

0人赞添加讨论(0) 举报

何处买醉

3楼-- · 2019-01-02 20:11

try

html, body {
  overflow-x:hidden 
}

instead of just

body {
  overflow-x:hidden 
}

0人赞添加讨论(0) 举报

姐姐魅力值爆表

4楼-- · 2019-01-02 20:16

I encountered the same problem with Android devices but not iOS devices. Managed to resolve by specifying position:relative in the outer div of the absolutely positioned elements (with overflow:hidden for outer div)

0人赞添加讨论(0) 举报

余生无你

5楼-- · 2019-01-02 20:17

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

works on iOS9

0人赞添加讨论(0) 举报

伤终究还是伤i

6楼-- · 2019-01-02 20:19

Creating a site wrapper div inside the body and applying the overflow-x:hidden to the wrapper INSTEAD of the body or html fixed the issue.

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

0人赞添加讨论(0) 举报

梦寄多情

7楼-- · 2019-01-02 20:20

No previous single solution worked for me, I had to mix them and got the issue fixed also on older devices (iphone 3).

First, I had to wrap the html content into an outer div:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Then I had to apply overflow hidden to the wrapper, because overflow-x was not working:

  #wrapper {
    overflow: hidden;
  }

and this fixed the issue.

0人赞添加讨论(0) 举报

Overflow-x:hidden doesn't prevent content from

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间