Home/ Questions/Q 310849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T07:52:16+00:00

I have a three row, one column site design and I’d like to have

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sticky Footer will set you free.

    • 0