dynamic height

Can anyone help me to figure out how to have the height of my content container dynamically change within the container div? So that the content will be accessible by scrolling no matter the window size? And that the scroll bars will be revealed via overflow:auto? My site is https://jasonluckett.com

I believe the relevant code is:

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

			<div id="nav-above" class="navigation">
				<div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">&laquo;</span> Older posts', 'sandbox')) ?></div>
				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</span>', 'sandbox')) ?></div>
			</div>

<?php while ( have_posts() ) : the_post() ?>
			<div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>">
				<h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf(__('Permalink to %s', 'sandbox'), wp_specialchars(get_the_title(), 1)) ?>" rel="bookmark"><?php the_title() ?></a></h2>
				<div class="entry-content">
<?php the_content(''.__('Read More <span class="meta-nav">&raquo;</span>', 'sandbox').''); ?>

<?php wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'sandbox'), "</div>\n", 'number'); ?>
				</div>
				<div class="comments-link"><?php comments_popup_link(__('Add a comment', 'sandbox'), __('1 Comment', 'sandbox'), __('% Comments', 'sandbox')) ?></div>
				<?php edit_post_link(__('Edit', 'sandbox'), "\t\t\t\t\t<div class=\"edit-link\"><span>", "</span>\n\t\t\t\t\t</div>\n"); ?>
			</div><!-- .post -->

<?php comments_template() ?>
<?php endwhile ?>

			<div id="nav-below" class="navigation">
				<div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">&laquo;</span> Older posts', 'sandbox')) ?></div>
				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</span>', 'sandbox')) ?></div>
			</div>

		</div><!-- #content -->
	</div><!-- #container -->

And the CSS is:

#header {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	width:100%;
}
#branding {
    width:950px;
    margin:0 auto;
}
#access {
    width:950px;
    margin:0 auto;
}
#access2 {
	width:100%;
	margin:0 auto;
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url(images/mMix_background.jpg);
	border-top-width: 8px;
	border-right-width: 8px;
	border-bottom-width: 8px;
	border-left-width: 8px;
	border-top-style: solid;
}
#content-wrap {
	width:950px;
	overflow:hidden;
	position: fixed;
	top: 80px;
	background-image: none;
	right: 50%;
	margin-top: 0;
	margin-right: -475px;
	margin-bottom: 40;
	margin-left: auto;
}
#container {
	width:590px;
	float:left;
	height: 590px;
	overflow: auto;
	position: relative;
	left: 0px;
	top: 0px;
}
#content {
	margin:0 40px 0 40px;
}

Thanks so much for any help on this. I’ve just not been able to figure it out.