Pure CSS for 2 columns with the same height but stretching to a min-height of 100%

Question

I'm working on a template for my web app. It should have a header, a footer, a body and a side menu with a gradient background. The page should look similar in any resolution starting from 800x600, and because of that I'm using percentajes instead of fixed sizes. Also, it should work in IE7/8, so I'm trying to avoid CSS3 and webkit/gecko only features

Since the body content might exceed the size of the screen, I'm using this approach to keep the column's height the same.

The problem I'm facing is: when the body content is smaller than the screen, and no scroll needed, it would be desirable that the column's background fill the 100% of the available viewport, excluding header and footer.

I consider myself more a Java guy than a web designer, so I'm not pretty sure what I'm doing when it comes to CSS, but I've tried this with no results. Is there a way to achieve my goal without javascript?

Here is my code. In spite of my efforts to clean it up before asking this question, it might seem unclean due to all the changes I've been testing.

CSS

* {
margin-top: 0;
margin-bottom:0;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: rgb(216, 218, 234);
}

#container {
width: 80%;
min-height: 100%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
background-color: rgb(255, 255, 204);
}

#header {
min-height:120px;
height: 19%;
width: 100%;
background-color: #CCC;
clear: both;
float: left;
}

#subcontainer {
clear: both;
min-height: 77%;
height: auto !important;
height: 100%;
background-color: rgb(255, 255, 204);
position: relative;
}

#menuback {
float: left;
width: 100%;
min-height: 100%;
position:relative;
right:85%;
background: #088316;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#088316), to(#FFFFFF));
background: -webkit-linear-gradient(#088316, #FFFFFF);
background: -moz-linear-gradient(#088316, #FFFFFF);
background: -ms-linear-gradient(#088316, #FFFFFF);
background: -o-linear-gradient(#088316, #FFFFFF);
background: linear-gradient(#088316, #FFFFFF);
-pie-background: linear-gradient(#088316, #FFFFFF);
behavior: url(/pie/PIE.htc);

}

#menu {
float: left;
width: 15%;
min-height:100%;
position:relative;
left:85%;
}

#fondocuerpo {
float: left;
width: 100%;
min-height:100%;
overflow:hidden;
position:relative;
background-color: #DDF;
}

#cuerpo {
float: left;
width: 85%;
min-height:100%;
position:relative;
left:85%;

}

#footer {
clear:both;
width: 100%;
height:4%;
background: #007F0E;
}

HTML

<body>
    <div id="container">
        <div id="header">
            <p>Header</p>
        </div>
        <div id="subcontainer">
            <div id="fondocuerpo">
                <div id="menuback">
                    <div id="menu">
                        &nbsp;
                        <p>Menu</p>
                    </div>
                    <div id="cuerpo">
                        <p>body</p>
                        <p>body</p>
                        <p>body</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <p>Footer</p>
        </div>
    </div>
</body>

And this is how it should behave when the content is smaller than the viewport.

@Pete I'm targeting to Chome and Firefox, but my main client uses IE7. Regarding the header and footer, I'm working with percentajes because I would like them to shrink or expand depending on user's screen resolution (my main client has a quite old computer and uses 800x600), but I can set them fixed heights if that solves the problem. — DiegoAlfonso, May 17 '13 at 14:31
I was facing this very delimna and I resorted to jQuery, but there is another solution that was created within my question that I posted that might help. http://stackoverflow.com/questions/16592597/issue-with-responsive-columns-having-equal-height — Cam, May 17 '13 at 13:47

Pete · Answer 1 · 2013-05-17T15:28:40.650

This is the closest I could get. It should work in ie8+, not too sure about ie7 though as I don't have a browser I can test it on.

I have gone with fixed height header and footer as I thought if the content is larger than the percentage size, it will cause the template to break

HTML

<div id="wrapper">
    <div id="header">header text</div>
    <div id="leftColumn"></div>
    <div id="rightColumn"></div>
    <div id="footer">footer text</div>
</div>

CSS

html, 
body {min-height:100%; padding:0; margin:0;}
#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#leftColumn,
#rightColumn {min-height:100%; float:left; width:50%;}
#header {margin-top:-50px; height:50px;}
#footer {clear:both; margin-bottom:-50px; height:50px;}

http://jsfiddle.net/naqE6/33/

This solution isn't too great though as if one column grows taller than the initial window height, the other column doesn't grow for some reason.

As your solution needs to be compatible with IE7 and as there isn't a pure css solution, I would go with a simple jquery:

http://jsfiddle.net/naqE6/36/

Pure CSS for 2 columns with the same height but stretching to a min-height of 100%

1 Answers1

Linked