ansaurus

Question

How to make a div expand to fit available vertical space?

Answer 1

+2 A:

EDIT:
Why not use top and bottom. Here's a full example.
You can tweak the top and bottom values, to optimize your header/footer placement.

<html>
 <head>
  <style type="text/css">
   BODY {
     margin: 0;
     padding: 0;
   }

   #wrapper {
     position: relative;
     height: 100%;
     width: 100%;
   }

   #header-wrapper {
     position: absolute;
     background-color: #787878;
     height: 80px;
     width: 100%;
   }

   #content {
     position: absolute;
     background-color: #ababab;
     width: 100%;
     top: 80px;
     bottom: 50px;
   }

   #footer-wrapper {
     position: absolute;
     background-color: #dedede;
     height: 50px;
     width: 100%;
     bottom: 0;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
    <div id="header-wrapper">
      <div id="header">
        <div id="logo-bar">Logo</div>
      </div>
      <div id="nav"></div>
    </div>
    <div id="content">Content</div>
    <div id="footer-wrapper">
      <div id="footer">Footer</div>
    </div>
  </div>
 </body>
</html>

Zyphrax 2010-02-28 16:28:01

Using both top **and** bottom properties on a `div` causes problems in IE6 and IE7/8 in quirks mode. Don't know if the OP wants to support those.

Marcel Korpel 2010-02-28 17:04:35

The use of top/bottom is a good idea, I always forget about those. Thanks for the detailed answer!

SphereCat1 2010-03-01 12:24:54

Answer 2

+1 A:

A good article for footers is at A List Apart: http://www.alistapart.com/articles/footers/

It has the actual example of how you position a footer at the bottom with the expanding content div.

Patrick 2010-02-28 16:37:38

Great article, thanks for passing it along.

SphereCat1 2010-03-01 12:24:06

Answer 3

A:

For a clean & simple solution that works well in all common browser, use this:

http://ryanfait.com/sticky-footer/

Tom 2010-02-28 22:25:48

This looks to be exactly what I need! Thanks!

SphereCat1 2010-03-01 12:23:51

ansaurus

tags:

views:

answers:

How to make a div expand to fit available vertical space?

related questions