CSS: 3 column height 100%

Question

Here is an example page:

I want to set 100% height for the content class (see the "Problem here" comment in the CSS source), but when I do this left and right columns (nested in the content div) become 0px height. But when content has height set in pixels it works fine.

Are there any solutions without JavaScript?

http://stackoverflow.com/questions/4515251/holy-grail-layout-with-100-height — Markus Jarderot, Apr 10 '12 at 09:20
From another "Matthew": http://www.alistapart.com/articles/holygrail/ — Markus Jarderot, Apr 10 '12 at 09:26
Adding `padding-bottom:9999px; margin-bottom:-9999px;` to left and right columns helped. Thanks! — m03geek, Apr 10 '12 at 10:28
But those tricks cause scroll to appear. As for other examples - I need "center" element placed under "left" and "right" columns and center element shouldn't contain any margins to draw fancy rounded borders. — m03geek, Apr 10 '12 at 14:19

Paul Sweatte · Accepted Answer · 2016-11-17T05:57:55.837

Use display: inline-block for the columns and height:100% for the html and body tags:

    <!doctype html>
    <html>
      <head>
      <style>
      html, body, #content, #left, #right, #center { height: 100%; }
      #content { width: 100%; }
      #left, #center, #right { display:inline-block; }
      #left, #center, #right { width: 32%; border: 1px solid red; }
 
      /* media query for IE 6-7 */
      @media, 
        { 
        #left, #center, #right { display:inline; }
        }
      </style>
      </head>
      <body>
        <div id="content">
            <div id="left">foo</div>
            <div id="center">bar</div>
            <div id="right">baz</div>
        </div>
      </body>
    </html>

CSS: 3 column height 100%

1 Answers1

Linked