Why did the page move up with the overflow container: hidden?

Question

I ran into a problem that is really strange. This is in every browser.

Everything works correctly until you try to navigate to the section using the hash (for example, #contactUs on my page) ... try this url: http://mahersalam.co.cc/projects/2011/#contactUs

You will see that the SHIFTS 10px page returns up. if you remove the hash, it works again.

I have a wrapper on the page (#container) that has overflow: hidden, I did this to make sure that the scrollbars do not appear if the permission is changed. If you remove the overflow property, it works too.

I suppose that the movement happens through the place of the scrollbar, but since it is hidden, it remains only.

And does anyone know how to fix this problem?

Edit:

I found a solution, and I wrote it in the underders.

Answer 1

The solution was to remove height:100%from .rightColand .leftCol.

I assume these sections were full due to the height property.

Answer 2

This certainly represents an aesthetically pleasing layout. Very nice.

Anywho, the overflow seems to take a piece from the top edge #headerWrapand add it to the bottom of the page for me, it's exactly 16 pixels.

So far I have not tried anything. Can you get it so that it #containerdoes not overflow horizontally?

---

: . ...
#container overflow: hidden; overflow-y: hidden; Firefox .

Answer 3

, , . scrollTop "16".

greasemonkey Firefox, .

window.addEventListener('scroll', 
  function(e)
  { 
    var cont = document.getElementById("container");
    if ( cont.scrollTop > 0) cont.scrollTop = 0; 
  }, 
  false );

, , .

, , , , , , scrollTop 0.