Dead-Simple Solutions

Today, I learned something new in CSS. The question is fairly simple: How do you occupy the rest of the height of a page? Let's say you have a header with a height of 200px (the blue area above), and for the bottom part, you want the height to be flexible and fill-in the rest (red part). Same idea can be applied to widths.

Solution:
Use of absolute positioning. Specify the top style to be the height of your header and set bottom to 0.

Sample:

<!DOCTYPE html>
<html>
<head>
<title>Auto-expand body height</title>
<style type="text/css">

body {
 height: 100%;
 margin: 0;
 position: relative;

}

html {
  height: 100%;
}

html * {

  box-sizing: border-box;
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body>
<div style="height: 200px; border: 1px solid blue;">
</div>
<div style="border: 1px solid red; position: absolute; top: 200px; bottom: 0; width: 100%;">
</div>
</body>
</html>

[Updated June, 2014] Or if you want a fixed footer too:

<!DOCTYPE html>
<html>
<head>
<title>Auto Expand</title>
<style type="text/css">

body {
 height: 100%;
 margin: 0;
 min-height: 450px;
 position: relative;
}

html {
  height: 100%;
}

html * { 
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body>
  <div style="height: 200px; border: 1px solid blue;">
  </div>
  <div style="border: 1px solid red; position: absolute; top: 200px; bottom: 100px; width: 100%;">
  </div>
<div style="height: 100px; border: 1px solid green; position: absolute; bottom: 0; width: 100%;">
  </div>
</body>
</html>

Dead-Simple Solutions

Nov 23, 2011

Occupy the remaining height in CSS