100% height Columns

100% height Columns

Hi all

I have a jsfiddle here: http://jsfiddle.net/EhN23/

And demo here: http://www.ttmt.org.uk/col/

I’m sure this really simple.

I have a left and a right column in a containing div the containing div has min-height:100%;
and the html,body has height:100%;

I want the columns to be 100% height of the avaiable space with min-height:100%;

Why doesn’t this work?

        <!DOCTYPE html>
        <html lang="en">
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

          <style type="text/css">



          <title>Title of the document</title>


          <div id="wrap">

            <div id="content">
              <div id="right-col" class="col"><h2>Col 2</h2></div>
              <div id="left-col" class="col"><h2>Col 1</h2></div>



Why doesn’t this work?

Because with the min-height-direct-child-inside-100%-height-html/body-elements trick, you get only one shot.

That is, if wrap is min-height:100% and is a direct child of body and body and its parent html are 100% high, then wrap is the only one who can be 100% high. Because it’s a min-height, instead of an explicit (uses non-% units) height, the children cannot set their own (min)heights based on that. The children (like content) have nothing to base their heights on, because they don’t have an explicit-heighted parent.

Browsers are a bit dumb that way, and for all the b*tching people do about CSS, this is one of its actual flaws that we can legitimately complain about. Vertical centering being another…

What you’ll need to do is choose one of the hackitty hack-hacks to imitate the look of 100% height for your content child.

I believe there are a few listed in the sticky thread CSS tips and tricks here in teh CSS section. Off the top of my head there’s

  • same background colours to fake full-lengh
  • use tables (or display table) as containers (may open up all the problems with table display though of course, such as this over-a-decade-old Netscape bug still biting in Gecko browsers)
  • use absolutely positioned boxes as containers (children inside set to 100% must obey)
  • fix position everyone else so the middle looks 100% tall + sticky footer

Just some ideas, but you’ll want to check the sticky thread for implementation details. Also some of the info there may be old-- for example, we probably don’t care anymore that IE6 doesn’t obey the absolute-positioned-parents thing.


As stomme said there are a variety of methods you can use for equal columns but the easiest is to use the display:table-cell routines for ie8+ especially when a sticky footer is called for because this will allow for a fluid height sticky footer unlike any other method.

However, it is still not easy to do this with 2 columns when you have full width headers and footers. Its easy with just one column but when there are two columns you have to create the table as though you would with a real table and code the extra cell as an empty cell an d then drag the content on top.

This example and [URL=“http://www.pmob.co.uk/temp/sticky-footer-2col-display-table4-2.htm”]this example showshow to do it. (IE7 and under just get floated columns and no sticky footer).

There is an easier method but only works inIE11+.

If you need to support IE7 and under then you have to go back to old school hacky methods like this.

This problem should be solved completely when flexbox is common place (maybe 3 years time or so).