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

Question

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

所以,我试图添加,min-width因为它将有助于摆脱空白空间.但我不能穿上min-widthfull.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

很多时候，单个元素会导致页面出现水平滚动条。这可能会很痛苦，但你可以通过这个简单的 CSS 技巧轻松找出有问题的元素

* {border:1px solid red}

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

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

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

Answer 4

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

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

所以,如果你在div中构建液体元素,你会这样做:

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

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