views:

580

answers:

1

I have a three row, one column site design and I'd like to have the center content div resize to fit the remainder of the column (height of screen - (hardcoded footerheight + hardcoded header height)). Is there a cute way to do this with CSS? If not, how can I accomplish this with javascript?

Thanks,

Tom

#container {
  background-color: gray;
  height: 100%;
}
#centercolumn {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  height: 100%;
}
#header {
  background-color: blue;
  height: 150px;
}
#content {
  background-color: yellow;
}
#footer {
  height: 50px;
  background-color: blue;
}

<html>
  <head>
    <link rel="stylesheet" href="test.css" type="text/css" media="screen"/>
  </head>
  <body>
    <div id="container">
      <div id="centercolumn">
        <div id="header">
          header
        </div>
        <div id="content">
          content
        </div>
        <div id="footer">
          footer
        </div>
      </div>
    </div>
  </body>
</html>
+3  A: 

Sticky Footer will set you free.

ChssPly76
Neat, thank you!
cakeforcerberus