14

Maybe this is an easy fix, but it has been driving me crazy for a long time so I finally decided to see if a solution exists.

Simply put, I center most of my web pages within wide view-ports.

Example, a view-port might be capable of 1028px and I want my page width to only be 960px.

So my css looks like this:

#pageWrapper { /* page width is 960 pixels */
    margin:0 auto;
    width:960px;
}

No problem with that.

The problem comes in when I start a dynamic page that is shorter than the height of the and then my page expands (via jQuery slideOut, etc.) below the bottom of the screen and causes the vertical scrollbar to appear.

It ends up making the page flicker left during the slideOut and then flicker right during slideIn.

Is there some way through css to force a 20px right margin and still take advantage of margin:0 auto; ?

Thanks.

H. Ferrence
  • 7,906
  • 31
  • 98
  • 161
  • You can try using `overflow-y: scroll` on your `html` or `body` element, but I'm not sure whether this will work. At the same time you should be able to do this with 3 lines of javascript/jquery and then attach this function to `onresize` event. – Aleks G Mar 10 '12 at 22:37
  • Another way is to just force the scroll bar to always exist. There is a css option that does this but I don't remember what it is. – Dan D. Mar 10 '12 at 22:38
  • @ErickPetru No, that wasn't it. – Dan D. Mar 10 '12 at 22:43

1 Answers1

11

When the contents of the page no longer fit vertically, the browser adds a scrollbar to the right side of the window. This changes the available width in the browser window, so any content that is either centered or positioned relative to the right side of the window will move left a bit. This is very common.

There are a number of ways to control this, but the most common is to either make it so you always have a scrollbar or never have a scrollbar by controlling the overflow-y property on the window.

Setting overflow-y: scroll will force the scrollbars to always be there.

Setting overflow-y: hidden will force there to never be scrollbars.

Oriol
  • 274,082
  • 63
  • 437
  • 513
jacktheripper
  • 13,953
  • 12
  • 57
  • 93
  • 3
    this does not seem to work with the latest chrome. Not able to see the scrollbar still. – vijayst May 23 '18 at 05:42
  • You can also do: `html { min-height: 101%; }` – Guus Jun 28 '20 at 13:41
  • NB: `overflow-y: hidden` prevents the user from scrolling down by any means, effectively rendering any content below the lower viewport inaccessible. – Peter Jan 19 '17 at 02:15