浏览器上的水平滚动条会在我的网站右侧显示空白区域,是什么原因造成的?

时间:2011-06-27 21:33:18

标签: css browser scrollbar

我一直在开发这个网站一段时间,今天我突然发现浏览器上的水平滚动条正在显示,并允许网站向右滚动一两英寸。

整个网站的宽度仅为960像素,屏幕分辨率为1680像素,显然它应该有足够的空间。

该网站仍然显示完全相同,但滚动条让我烦恼。我已经尝试使用CSS中的*选择器为所有内容添加边框,但似乎没有任何东西突出显示额外的英寸。我还使用谷歌Chrome控制台突出显示网站的不同部分,但没有一部分导致问题。

每个浏览器都显示相同的问题,您有任何解释吗?

这是相关网站:http://compressmycode.com/

3 个答案:

答案 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

我仍然想知道滚动的根本原因。如果你拥有它,请分享这些知识。