当前位置：文江博客话题详情

浏览器上的水平滚动条表明我的网站右侧有空白，是什么原因造成的？

发布于 2024-11-17 10:43:56 字数 385 浏览 1 评论 0原文

我开发这个网站已经有一段时间了，今天突然我注意到浏览器上的水平滚动条正在显示，并且允许网站向右滚动一两英寸。

整个网站只有 960 像素宽，而我的屏幕分辨率是 1680 像素，所以显然它应该适合足够的空间。

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

每个浏览器都显示同样的问题，你有什么解释吗？

这是有问题的网站：http://compressmycode.com/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

許願樹丅啲祈禱 2024-11-24 10:43:56

删除 CSS 第 31 行周围的 #body-wrapper 样式中的 position:relative 并使用 margin-top:50px 而不是 top:50px

如果您必须保留 position:relative 您也可以将 overflow:hidden 应用于您的包装器以删除可能存在的任何溢出，但也有一些这样做存在固有的危险。

编辑

经过进一步检查，我发现您的 .right div 是问题所在。由于某种原因，它向右浮动会导致您出现问题。

回复收藏 0 原文

南烟 2024-11-24 10:43:56

问题出在你的 JS 上。如果禁用它，它会完美运行。

更准确地说，使用 Facebook 按钮：
div#body-wrapper > div#site-title >右分区> div.fb-root > div

将其设置为溢出：隐藏，修复了问题

回复收藏 0 原文

以酷 2024-11-24 10:43:56

我有类似的问题。似乎没有什么超出宽度的东西，但底部仍然有一个滚动条。

我的页面结构是：

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

*sharethis：http://www. sharethis.com/#sthash.r7Bx1kDr.dpbs

我不会共享 CSS，因为除了外部级别和顶部边缘的框阴影之外没有其他任何东西。

虽然我会分享问题是如何解决的。
我给了

<div class='page'></div>

css：

.page{
  overflow: hidden;
}

这解决了我的滚动问题。
尽管修复只是找到正确的父级并为其提供上面的 CSS，但

我仍然想知道滚动的根本原因。如果您有这些知识，请分享。

I had a similar issue. There was nothing that seemed to exceed the width but still there was a scroll bar at the bottom.

My structure of page was:

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

*sharethis: http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs

I'm not sharing the CSS as there was nothing other than box-shadows at the outer levels and top-margin.

Although i'll share how the problem got fixed.
I gave the