CSS vertical sizing

I fail to get the content area on a web page sized and aligned properly. The area should use all the vertical visible screen space except 80px on the top and 20px on the bottom. And in some cases, the page might continue further down (but you'll have to scroll to see it).

Example: a) If the screen area is 800x600 - the content area should开发者_如何学Go be 500px high b) If the screen area is 700x1100 - the content area should be 1000px high

The site is built with HTML and CSS.

You have to look into liquid layout concepts. See: Whats a liquid layout?.

I think the best option in your situation using different CSS for different screen resolutions

You can set different rules based on the screen size using media queries. For example, something like this:

@media only screen and (max-width: 1099px) {
  /* rules that only apply for canvases narrower than 1100px */
}