3 column css layout with sticky footer - columns 100% height?

Question

With combining two examples I've found:

http://alistapart.com/article/holygrail

http://mystrd.at/modern-clean-css-sticky-footer/

I have come up with this layout.

http://jsfiddle.net/xVuh5/

And it is great but I would like to have the 3 columns 100% height.

Can anyone help please?

Thank you

Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Text Text</p>
    </div>

</div>

<div id="footer">This is the footer.</div>

    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

As I see the first answers coming in are missing the point of my question, I am adding this image to make the question clearer.

Melanism

On a side note, you're using HTML5 then don't hesitate to use available elements : <header>, <section>, <footer>, <aside>... – Christo

people answering this question should provide jsfiddles so we can see your solution working – Salbu

are you using JQuery ? – Qualitative

Answer 1

Actually, I would do it differently.

Pure CSS solution, Totally responsive, Without fixing any height (header or footer)

Here's the Demo

The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)

<div class="Container">
    <div class="Header">
        <h1>Header</h1>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper Content">
                    <div class="Table">
                        <div class="Column C1">
                        </div>
                        <div class="Column C2">
                        </div>
                        <div class="Column C3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The column width may be fixed, or not.. to you're will.

Reredos

hi avrahamcool, thank you for answering. in your solution I don't see the 3 columns being 100% height. please see the added image in my question. – Melanism

@Melanism what browser are you using? can you provide an img of the problem? because it works fine for me. its 100%. in all browsers. – Reredos

applied a minor change (min-height => height). try it now. – Reredos

This looks good but it just rearranges the elements so much. the solution I have in my question is simple and clear enough for me and I was hoping that the height of the columns can be just applied to it. Because the 3 columns and the sticky footer look and work good and are easy to implement. Is there no just an addition to the layout I have? I appreciate the answer. – Melanism

@Melanism , I think that this is the best layout that you can come-up with.. just Copy-Past it from my solution, and fill the appropriate places with your content.. If you still don't like it.. use one of the other answer you got here.. Good luck. don't forget to Upvote & accept if you do like it. – Reredos

thanks for the reply. this solution is the best I got so far but what I don't need is the scrolling of the content between the header and the footer. As you can see from my question I needed a header, sticky footer, 3 columns (left and right fixed width) that are 100% height (to the sticky footer) when the content in them is "short". – Melanism

I don't understand the problem. if the content is short.. you'll not have a scroll. do you want the content to be cut when its large? use overflow:hidden; instead of auto. Comment again if you still need my help, and I'll try to fix the layout as you need. – Reredos

thank you for the reply. seems like you are very keen on solving my problem and I appreciate it. your solution is ok, i can't be 100% sure because I don't know css in that much detail. what i don't want the the scroll of the columns between the header and the footer. if the content in one of the columns is larger then the window, the whole page is scrolled. footer is always at the end of the content in the columns. so in that case footer goes out of the bottom of the window. i hope you understand this. and the columns left and right are fixed width. can you take the basic design from my css? – Melanism

so you don't want a sticky footer?? in that case you don't need my solution. and remove the word sticky footer from the question title.. – Reredos

we obviously don't understand each other. or we don't use the same terminology. sticky footer, as I understand it. sticks to the bottom of the window if there is not enough content on the page. – Melanism

and continue to stick when you scroll.. (if there is more content..) – Reredos

If you look at these examples, first page of Google results, this is not what they are saying: mystrd.at/modern-clean-css-sticky-footer css-tricks.com/snippets/css/sticky-footer but I would leave it at that. i understand it differently. shake hands? – Melanism

OK. I stand corrected. you were right. I'll try to create a new fiddle for that and comment when done. – Reredos

Sorry, but I cannot understand why this answer is upvoted! The HTML markup is pure "Divitis" and the CSS code is overly complicated. The "modern" way to solve this classical problem in multi-column layout is to use CSS3 Flexbox with a fallback for IEs < 10 using display: table. That's it - no need to over complicate things at all! – Closeup

@Closeup the reason my layout is better then you think, is that you don't need to fix the header or footer height at all. using flex can be really helpful, but unfortunately it's not yet fully supported by all browsers. – Reredos

@avrahamcool: The only relevant browsers that do not support Flexbox are the IE 8+9. So use display:table as fallback. And if you want a sticky footer, use a JS solution for these browsers. But when it comes to responsive design you'll get into trouble with your HTML markup ..., and you'll have to use Flexbox anyway! ;-) So why not use it directly and have a clean and semantic markup!? – Closeup

actually, this design is totally responsive without JS and without flexbox .. BTW: I agree that the flex design is better.. – Reredos

@Closeup I tried to recreate the same layout using flex and table layout, and here's a fiddle. but it don't work in chrome. As I said before the flex is not fully implemented yet. I also tried using flex again for the column but no luck. so, right now I think my layout is the best option (If we exclude JS implementations). I will be happy if you can show me how to fix that fiddle. – Reredos

@avrahamcool: Yes, I'll do this, but may take 1 or 2 days as I am short in time. Chrome might be a bug, so don't worry. – Closeup

@Closeup No problem.. I have the time and patience. – Reredos

Answer 2

Probable solution: DEMO

I have used wrapper class to adjust height.

.wrapper{
    height: auto !important;
    min-height: calc(100% - 60px);/* 100% - 30px header - 30px footer*/
}

adjust width of columns.

Wakayama

if you remove the text from the left and right sidebars you will find the columns not being 100% height – Melanism

Answer 3

You could use css tables to do this.

FIDDLE (Little content)

FIDDLE (Lots of content)

(Assuming header height of 30px and footer height of 100px)

Relevant CSS

#container
{
    display:table;
    width: 100%;
    height: 100%;
    margin: -30px 0 -100px;
    padding: 30px 0 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#container .column {
    display: table-cell;
}

Fries

if you remove the content from the column id="right" you will find the footer not being sticky. can you do the same with the sticky footer? – Melanism

@Melanism - I updated my answer - and included 2 fiddles with identical css: 1 with little content - so that you can see the 'sticky footer' working, and one with lots of content. (Originally I had forgotten to apply height:100% to the table) – Fries

Answer 4

The above problem can be solved by applying negative margin and positive padding method.

The js fiddle can be found at http://jsfiddle.net/6RQES/1/

HTML code :

<div id="header">This is the header.</div>


    <div id="container">
    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="left" class="column">
        <h2>This is the left sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="right" class="column">
        <h2>This is the right sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>
    </div>


<div id="footer">This is the footer.</div>

The corresponding styles are:

    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }
    #maincontainer{
        position:relative;
        min-height:100%;
        padding-bottom: 32px;
    }
    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        overflow: hidden;
    }

    #container .column {
        position: relative;
        float: left;
        padding-bottom: 8000px;
        margin-bottom: -8000px;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

Satisfy

Answer 5

See DEMO

I have change some css changes. Have a look hope it will help you

updated CSS

<style>
    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        display:table;
        height:100%;
    }

    #container .column {
        position: relative;
        float: left;
        display:table;
        height:100%;
    }

    #center {
        padding: 0 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        /*position: absolute;*/
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        /*padding-top: 1em;*/
        text-align: justify;
    }
    </style>

Swinge

Answer 6

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" bgcolor="#000066" colspan="3">fdsafdsa</td>
</tr>
<tr>
<td bgcolor="#666666" height="1000px" width="15%">fdsafdsasd</td>
<td bgcolor="#00CC00" height="1000px" width="70%">fdsafdsasd</td>
<td bgcolor="#990033" height="1000px" width="15%">fdsafdsasd</td>
</tr>
<tr><td colspan="3" bgcolor="#CCCC00">fdsafdsafds</td></tr>
</table>

Impropriate

tables aren't for layout – Salbu

Answer 7

your enhanced code: http://jsfiddle.net/xVuh5/6/
I have changed many thing:

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         
        margin: 0 0 100px;
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container .column {
        position: absolute;
        float: left;
    }

    #center.column{
        position:relative;
        min-width:100px;
    }

    #center {
        padding: 10px 20px;
        width: 100%;
        margin-right:150px;
        margin-left:150px;
    }

    #left {
        width: 130px;
        padding: 0 10px;
        left: 0px;
    }

    #right {
        width: 130px; 
        padding: 0 10px;
        right:0px;
    }

    #footer {
        clear: both;
        margin-bottom: 0px;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 0px;
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        display:block;
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
        z-index:101;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

UPDATE: avrahamcool solution is much much better, useing a clean code is always a better solution

Apportionment

the columns overlaps the footer (I'm checking in Chrome), and thanks for the update.. lol – Reredos

@avrahmcool I don't see any bug or I don't get your point at all? if the right or left column get longer ... the bottom must be higher, or how the user will see it? and as the matter of fact main content will get bigger than the side bars even in rare casess EDIT: did you look for 4 fork or 6? – Apportionment

indeed, but the other column should grow as well. – Reredos

Answer 8

Easiest solution: apply height:100%; to both #container .column and also to #container. I just gave it a shot in your JSFiddle and it seemed to work fine. Main point being, that the div containing the columns also needs 100% height applied.

So this would be your new CSS:

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        height:100%;
    }

    #container .column {
        position: relative;
        float: left;
        height:100%;
    }

Academic

Answer 9

At the place of height you need to set min-height and the other method just keep

height:900px;

like this (static height)for full height and keep it's css with

overflow:scroll; or overflow:auto;

Calypso

Answer 10

Just to be simple.

HTML:

<div class='section'>
    data
</div>
<div class='section'>
    data
</div>
<div class='section'>
    data
</div>

CSS:

html, body { height: 100%; } /** Will not work without it because until and unless the height of the parent divs are not 00% the children could not have the height 100% aswell. **/

.section {
    width: calc(100%/3); /** To make the width of all the divs same **/
    height: 100%; /** Obivo, making their height to 100% **/
    display: inline-block;
}

.footer {
    position: absolute; /** To enable **bottom** property to work :P **/
    bottom: 0; /** To stick it to the bottom **/
}

Hope it helps.

Gibun

tried this out. without float:left; for sections this doesn't work. you also left out the footer – Salbu

Answer 11

As mentioned it would work with "display: table;": JSFiddle

However float:left won't allow div-s to be the same height.

    #container {
        display: table;
    }
    #container .column {
        position: relative;
        float: top;
    }
    #center {
        ...
        display: table-cell;
    }
    #left {
        ...
        display: table-cell;
    }
    #right {
        ...
        display: table-cell;
    }

And the order of div-s:

  <div id="left" class="column">
  </div>
  <div id="center" class="column">
  </div>
  <div id="right" class="column">
  </div>

Oh and I almost forgot to make header and footer to float:

  #footer {
      ...
      position: fixed;
  }

Werbel

Answer 12

You could achieve your goal by using Jquery :

var height = $(window).height();   // returns height of browser viewport or use next line
var height = $(document).height(); // returns height of HTML document , just use what u need, not both.

then :

$('.cols').height(height);

So, I think this would be the best

Qualitative

why are you setting the same variable twice? – Salbu

Hey no downvote me !! Did you read the comments on the first line code? I see there's an OR , is'nt there? so take me off the downvote man and read all the code lines before, please. @Salbu – Qualitative

Edited for a better understanding @Salbu – Qualitative

the OP didn't ask for JavaScript solution much less jQuery – Salbu

Are you bored ,man ?? I'm just providing a solution,an easy and a clear solution. Just this. C'mon remove the donwvote man. by the way is the fastest one. @Salbu – Qualitative

¬¬ but it's a good option one. the fastest. Sometimes the expected answer is not the best. – Qualitative

so the OP should add jQuery just to use your answer? what if OP is already using Prototype? Not the fastest solution. Not what the OP requested – Salbu

Then would be another solution. NOT a bad one, or a nonworking one. Simply another. That's the difference. The bad answer needs downvotes, not mine. – Qualitative

Answer 13

You can achieve this by using the following function.. And call it on body onload

<body onload="height()"></body>

Now add the following function and add JQuery Library in your html.

function height()
{
var ele = document.getElementById('container');
$(ele).css("height", window.innerHeight - 100);
var height = $(ele).css("height");
$("#left").css("height",20+height);
$("#center").css("height",height);$("#right").css("height",20+height);
}

Mccoy

Answer 14

I edited your fiddle and just added a height field to the left, right, and center fields of the css portion. The number can be arbitrarily large and it should work for all display sizes. Definitely simpler than all the other solutions.

Edit: The background of the right, middle, and left will only go as far as the text itself without specifying the height. 100% height changes nothing, it only works to override a parent element with a different specified height (such as if a pixel height had been defined for all paragraph tags, but you want the background of one to cover all of the text and only the text, you would use ). To change the height to be the whole page, either the arbitrarily large height or another solution would be needed, but this is the reason it isn't working. 100% height makes it as if height had not been mentioned before. (this is based on my small amount of experience with one browser, not all solutions will work for all broswers)

Jerid

Answer 15

Just do that :

.col{
   display:block;
   height:100%;
}

It's Simple, it's fast, it's css.

Qualitative