Theodore Steiner Theodore Steiner - 1 month ago 6
CSS Question

Full Width Header Shifts as Scroll Bar Appears

I have a strange question -- my apologies if it is a silly one. Please note the code it too large to reproduce in a snippit so I am posting the link here.

The page I am building is a small intranet page with a full width header. When the user clicks on the button beside the submit button, a

div
from the top opens and pushes the content down. My problem is in my code editor there is no scroll bar on the page, so when the
div
opens it pops the entire page slightly over to the left to compensate for the scroll bar.

On codepen, I've pasted the shell of the site, but because a scroll bar is included in its code area, the problem cannot be reperoduced exaclty.

Is there any way I can compensate for the lack of scroll bar in my code? Perhaps force one to be there?

Any help would be grand.

Answer

You can force a vertical scrollbar by adding the following CSS rule to the body:

overflow-y: scroll;