Question

Is there a way to prevent the vertical scrollbar from pushing over your content?

I have a page that changes height based on different inputs and the scrollbar pushes my content back and forth each time an input is toggled (content is centered).

Ive tried adjusting this with css and a little jquery but seems to have no effect. I dont want to hide the scrollbars or make it so the scrollbars are always visible.

seems that this could be adjusted using javascript or jquery. Heres a jsFiddle and heres my code:

<center>
<div id="content-container"> 

<div id="img" style="left: 50%; position:fixed">
<img src="http://www.google.com/images/logos/ps_logo2.png" width="122">
</div>

<div id="panel" style="position:absolute;top:1950px; border:solid; widt:00px; "> 
<div class="content"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- Panel -->
</div><!-- content -->
</div><!-- content-container -->
</center>

<script>
// On load panel slides in from bottom of page
$("#panel").delay(100).animate({
    top: "150px"
}, 1000);
</script>

I thought maybe the solution was to use Javascript scroll offset but am unsure.

Answer 1

Add overflow:scroll to the style of the body element. This will force the browser to display scrollbars whether the content overflows or not.