10

我目前正在创建一个响应式网站。我注意到水平滚动时右侧的空白区域存在问题。我可以通过添加来删除水平滚动overflow-x: hidden。但它不适用于 iPhone 和 iPad 等移动设备。

所以，我尝试添加min-width，因为它有助于摆脱空白。但我不能穿上min-widthfull.css （例如min-width:1000px;），因为它会设置为全角 - 见下面的例子：

完整的.css

#wrapper {
    width: 1000px;
    margin: 0 auto;
}

responsive.css (小于 1000px)

#wrapper {
    width: 100%;
    margin: 0;
}

我想知道你是否知道如何解决这个问题？如果您有更好的选择，请告诉我。或者我应该创建一个新的包装器 ID？

4

8 回答 8

29

Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});

于 2014-10-23T20:28:55.297 回答
20

您可以使用 css 代码隐藏水平溢出（然后水平滚动条将永远不会再次出现）：

body{
    overflow-x:hidden;
}
于 2013-12-06T13:04:30.237 回答
5

链接到页面？包装器中可能有某种元素突破了浏览器窗口。

通常它与填充和宽度有关。请记住，如果您在包装器内有一个设置为 100% 宽度的元素，并且您在 20px 的左侧和右侧添加了填充。它将创建一个水平滚动条，因为元素是 100% + 40 px。

因此，如果您在 div 中构建液体元素，您可以这样做：

#liquidelement {
   width:96%;
   padding:0 2%;
}

您需要从宽度中减去填充，并且在进行布局时始终使用填充百分比，因为它是流动的，而不是固定的。

于 2015-05-29T04:38:33.693 回答
3

通常情况下，单个元素会导致页面获得水平滚动条。这可能很痛苦，但您可以通过这个简单的 css 技巧轻松找出违规元素

* {border:1px solid red}

如果元素被隐藏，您还可以添加以下属性。

不透明度：1；能见度：可见；

演示：https ://codepen.io/i_abhi/pen/eYzpBjr

于 2020-10-13T07:58:44.007 回答
2

2020

如果你们中的任何人使用 Boostrap 并遇到这个问题，那么这就是答案。

对于引导用户

.row用.containeror包裹你，.container-fluid它会解决问题。

于 2020-07-01T11:23:59.533 回答
0

关于您的问题，代码似乎是正确的。但是，内部的某些元素也可能会影响确切的宽度并溢出您的边界。也可以检查所有内部元素。您可以使用 Firebug 或 Chrome Inspect Element。

于 2013-09-21T02:46:49.660 回答
0

您可以使用

#wrapper {
   max-width:100%
   width:100vw;
}

它对我很好。

于 2021-06-18T05:08:05.273 回答
0

这里只需要三个步骤：

  1. 向右滚动水平条，您可以看到额外的空白填充。
  2. 打开一个检查元素

这是通过按住ctrl + shift然后按下来完成的i

  1. 滚动所有元素，带有额外填充的元素应该将您的页面内容突出到创建的空白空间中。
于 2016-10-19T05:32:04.863 回答