How to Center a Wrapper Div and Compensate for Scroll Bar?

Question

I'm not finding any real answers. Forcing the scroll bar to always be there is not an acceptable solution, IMO. When you center your wrapper div and auto set the margins how do you compensate for when the scroll bar appears?

Thanks

Answer 1

You need to compare the viewport height to the document height. If viewport < document then the scrollbar is visible and you need to adjust you centralising code to allow for the ~20px scrollbar.

var viewportHeight = $(window).height();
var documentHeight = $(document).height();

if (viewportHeight < documentHeight ) {
    alert("Vertical scrollbar visible");
    // adjust container centralisation to account for scrollbar
}
else {
    alert("Vertical scrollbar not visible");
}    

You will need to put this into a function which is called on $(window).resize(fn); so that it updates should the browser window be resized.

Example fiddle