Hey Choesang, redsquare, here is another way you can do it without putting anything off the screen.
First find the height of the viewport that you have to work with, we'll call this 'viewportHeight'. If the content of your header and footer are already set, they will have a height. Calculate their heights and add them together, we will call this 'usedHeight'. The height you have left in which to put the contents is: remainingHeight = viewportHeight - usedHeight;
If you set the css property on your content container to be height=remainingHeight and overflow-y = auto, your content will always take up at least the minimum content height, and if there is too much content it will force a scroll bar to appear.
We are going to use the Prototype library to help us, but we could just as easily use jQuery or even write the code to calculate the heights ourselves.
Notice in the body I am setting the height to 100%, as well as the padding to 0, and the margin to 0. Most browsers put a 10px padding around the body and this will cause your footer to show up off the screen in the process I am showing.
<html>
<head>
<script type='text/javascript' src='prototype.js'></script>
</head>
<body style='height: 100%; padding: 0; margin: 0;'>
<div>
<div id='header'>header text</div>
<div id='content'>content text</div>
<div id='footer'>footer text</div>
</div>
<script type='text/javascript'>
// Here we will set the text of the content, calculate its height,
// and set the max height. In production I would use less lines,
// for here writing each step out for clarity.
var viewportHeight = document.viewport.getHeight();
var headerHeight = $('header').getHeight();
var footerHeight = $('footer').getHeight();
var usedHeight = headerHeight + footerHeight;
var remainingHeight = viewportHeight - usedHeight;
// we have our remaining height, now set the style.
$('content').setStyle({
'height': remainingHeight,
'overflow-y': 'auto'
});
</script>
</body>
</html>