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

Overflow-x:hidden doesn't prevent content from

2019-01-02 19:18发布

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:21

This is the simplest solution to solve horisontal scrolling in Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}

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

深知你不懂我心

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

Adding a wrapper <div> around the entirety of your content will indeed work. While semantically "icky", I added an div with a class of overflowWrap right inside the body tag and then set set my CSS like this:

html, body, .overflowWrap {
overflow-x: hidden;
}

Might be overkill now, but works like a charm!

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

梦该遗忘

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

The only way to fix this issue for my bootstrap modal (containing a form) was to add the following code to my CSS:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

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

上一页 1 2 3

Overflow-x:hidden doesn't prevent content from

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

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

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