Center Box height at 90% when scrolling - html

Question

I have a center box which is 90% of the page, this is because at 100% is leaves a blank space to scroll. Either way my issue at the moment is I have a page with quite a lot of content, and it goes off the bottom of the center box. I would set the hight to auto, but then on pages like my home page, the center box is too small on larger screens, making look bad.
Heres the CSS:
#centerBox {
width:70%;
min-height: 90%;
height: auto;
background:#ffffff;
text-align: center;
margin:0 auto;
-moz-box-shadow:0px 3px 3px 3px #737374;
-webkit-box-shadow:0px 3px 3px 3px #737374;
box-shadow:0px 3px 3px 3px #737374;
min-height:500px;
Any help will be appreciated!
Thanks,
James

Answer 1

firstly if upon giving 100% width, horizontal scroll comes then reset the layout
body
{
margin:0;
padding:0;
}
now, for your large content, always leave your height to auto i.e. height:auto
but it causes one problem, when there is no content, height will be too small.
what you can do is you can employ jquery to control the height.
leave entire css as it is and do this.
document.ready(function(){
if($('.content-container').height()<200)
$('.content-container').height('500');
});
where $('.content-container') points to the required div i.e. content which want to scale