我一直在开发这个网站一段时间,今天我突然发现浏览器上的水平滚动条正在显示,并允许网站向右滚动一两英寸。
整个网站的宽度仅为960像素,屏幕分辨率为1680像素,显然它应该有足够的空间。
该网站仍然显示完全相同,但滚动条让我烦恼。我已经尝试使用CSS中的*
选择器为所有内容添加边框,但似乎没有任何东西突出显示额外的英寸。我还使用谷歌Chrome控制台突出显示网站的不同部分,但没有一部分导致问题。
每个浏览器都显示相同的问题,您有任何解释吗?
这是相关网站:http://compressmycode.com/
答案 0 :(得分:3)
删除CSS第31行的position:relative
样式中的#body-wrapper
,并使用margin-top:50px
代替top:50px
如果你必须保留position:relative
,你也可以只在你的包装器中应用overflow:hidden
来删除可能存在的任何溢出,但是这样做有inherent dangers。
修改强>
经过进一步检查,我发现您的.right
div是个问题。出于某种原因,它被浮动到右边会导致你的问题。
答案 1 :(得分:1)
问题来自你的JS。如果你禁用它,它可以很好地工作。
更准确地说,使用facebook按钮: div#body-wrapper> div#site-title> div.right> div.fb-root>格
将此设置为溢出:隐藏,修复问题
答案 2 :(得分:0)
我有类似的问题。没有任何东西似乎超出了宽度,但底部仍然有一个滚动条。
我的页面结构是:
<body>
<div id='appContainer'>
<div class='page'>
<div>All the content along with "Youtube video"
which meant there was
an iframe within my page,
some other stuff like *sharethis buttons,
Which meant i had to add a few scripts.</div>
<div>more stuff</div>
<div>more fancy stuff</div>
<div>some more stuff with shadows and floating elements</div>
</div>
</div>
</body>
*分享:http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs
我没有分享CSS,因为除了外层和顶部边缘的盒子阴影之外别无其他。
虽然我会分享问题是如何解决的。 我给了
<div class='page'></div>
的CSS:
.page{
overflow: hidden;
}
这为我解决了滚动问题。
虽然修复只是为了找到合适的父级并给它上面的CSS
我仍然想知道滚动的根本原因。如果你拥有它,请分享这些知识。