Horizontal scrollbar on browsers suggests white space to the right of my site, what's causing it?_问答_开发者

Horizontal scrollbar on browsers suggests white space to the right of my site, what's causing it?

开发者 https://www.devze.com 2023-03-15 15:14 出处：网络

I\'ve been developing this site for a开发者_JAVA百科 while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two

I've been developing this site for a开发者_JAVA百科 while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.

The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.

The site still displays exactly the same but the scrollbar is annoying me. I've tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I've also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.

Every browser shows the same problem, do you have any explanations?

This is the site in question: http://compressmycode.com/

remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px

if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.

EDIT

Upon further inspection, I've discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.

The problem comes form your JS. if you disable it, it works perfectly.

More precisely with the facebook button: div#body-wrapper > div#site-title > div.right > div.fb-root > div

setting this to overflow: hidden, fixes the problem

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