Question

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

所以，我试图添加min-width因为它有助于摆脱空白空间。但我不能将min-width放在full.css上（例如min-width:1000px;），因为它会设置为全宽 - 请参阅下面的示例：

full.css

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

responsive.css（小于1000px）

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

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

Answer 1

我时不时地遇到这个问题，解决问题的很大一部分就是确定元素是罪魁祸首。我刚刚提出了这个小jQuery脚本，您可以在浏览器的JavaScript控制台中运行，找出哪些元素比体宽更宽，导致出现令人讨厌的滚动条。

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

Answer 2

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

body{
    overflow-x:hidden;
}

Answer 3

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

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

因此，如果你在div中构建液体元素，你会这样做：

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

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

Answer 4

此处不需要超过三个步骤：

向右滚动水平条，可以看到额外的空填充。
打开Inspect元素

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

滚动浏览所有元素，带有额外填充的元素应将页面内容突出到创建的空白区域。

Answer 5

2020年
如果您使用Boostrap遇到任何问题，那么这里就是答案。

引导用户

用.row或.container包裹.container-fluid，这将解决问题。

Answer 6

通常情况下，这是单个元素的问题，这可能导致页面获取水平滚动条。这可能会很痛苦，但是您可以通过此简单的CSS技巧轻松找出令人讨厌的元素

* {border:1px solid red}

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

不透明度：1;可见性：可见；

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

Answer 7

你可以使用

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

它对我很好。

Answer 8

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

响应式网站：如何摆脱水平滚动条？

8 个答案:

引导用户