Fluid 3 column layout with header, sticky footer and full height columns

Question

I've been trying to create a layout with the following features:

3 fluid columns
Columns that are full height
A header
Sticky footer

I found a similar question here: CSS layout with header, footer and multiple 100% min-height content columns

The author solved the problem using a table based layout. I would like to avoid using tables if possible so I can easily hide the outer columns on smaller screens.

Here is the code I have created so far: http://cdpn.io/DqGfp

As you can see in my codepen demo I am almost there. A refresh produces the correct layout in all cases but ideally this should happen on resizing too.

Here are the resizing bugs I'm trying to fix:

Going from a tall window to a short window causes an unnecessary scrollbar.
Going from a wide window to a thin window causes the content in the middle column to go under the footer.

I've tried using

$(window).height()

instead of

$(document).height()

but that causes a whole bunch of new bugs.

Any help is VERY MUCH appreciated!

Mohammad Areeb Siddiqui · Answer 1 · 2013-07-05T13:11:11.750

0

Try this:

HTML:

<div class="wrapper">
    <header>
        The header
    </header>
    <div class="column green">
        Column 1
    </div>
    <div class="column blue">
        Column 2
    </div>
    <div class="column yellow">
        Column 3
    </div>
    <footer>
        Sticky footer
    </footer>
</div>

CSS:

html, body { margin: 0; padding: 0; height: 100%; }

.wrapper {
    height: 100%;
}

header {
    background-color: orange;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.column {
    width: calc(100%/3);
    min-height: 100%;
    display: inline-block;
    float: left;
}

footer {
    position: absolute;
    bottom: 0;
}

Fiddle.

edited Jul 05 '13 at 13:11

answered Jul 05 '13 at 12:01

Mohammad Areeb Siddiqui

9,795
14
71
113

Hi @Mohammad. Thanks for your help. Unfortunately this layout breaks once you add some lengthy content. See this updated [fiddle](http://jsfiddle.net/VkPZU/1/) – Ben Pearson Jul 05 '13 at 12:35
change .`column`'s `height` to `min-height` :) and voila :) – Mohammad Areeb Siddiqui Jul 05 '13 at 13:11
Thanks again @Mohammad. But I'm looking for a sticky footer too. – Ben Pearson Jul 08 '13 at 14:16
@BenPearson I made it a sticky footer but the problem that when we resize the window it just go up or down with it and then when we refresh the page we get it down again so to fix that we need jQuery let me make a simple solutiona dn give it to you! – Mohammad Areeb Siddiqui Jul 08 '13 at 14:59

score 0 · Answer 2 · answered Jul 05 '13 at 12:04

0

You can solve this with two ways,

Use re-size jQuery function to do stuff again while window resize.

$(window).resize(function(){
     ////Write your code here again
})

Or you can use css properties to have fix positioned DIV at bottom.

position:fixed; bottom:0; left:0; right:0; height:100px;

answered Jul 05 '13 at 12:04

Maulik Suchak

1,028
1
8
23

Thanks for your response @Maulik Suchak. I'm already using $(window).resize and a CSS sticky footer in my code. [See here](http://cdpn.io/DqGfp) – Ben Pearson Jul 05 '13 at 12:29

score 0 · Accepted Answer · answered Jul 08 '13 at 14:19

So I figured it out. I needed clear all the forced column heights before recalculating them when the window is resized.

Here's a link to a post about my solution: http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/

Thanks for the help.

Fluid 3 column layout with header, sticky footer and full height columns

3 Answers3