Making a footer not rise above the bottom of the screen without extraneous markup

Question

If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower if the body content pushed it)? Note: I don't want to add any of markup to the page.

<html>
    <body>
        <header>...</header>
        <article>...</article>
        <aside>...</aside>
        <footer>...</footer>
    </body>
</html>

Here is some copy paste html. How do I need to modify the css to make it work?

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            p {
                margin-bottom: 10px;
            }

            article {
                display: inline-block;
                height: auto;
                width: 69%;
            }

            aside {
                display: inline-block;
                height: auto;
                width: 30%;
            }

            footer {
                height: 30px;
            }
        </style>
    </head>
    <body> 
        <header>
            <h1>Lorem Ipsum</h1>
        </header> 
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
            <p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
            <p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
        </article> 
        <aside>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
            </ul>
        </aside> 
        <footer>
            <span>Made by me.</span>
        </footer> 
    </body> 
</html>

This is very good question, I would like to increase the bounty. Maybe this will make others more interested about it. Also, I would prefer to see a solution that uses JS than one that does require adding additional markup. — sorin, Jul 11 '10 at 22:17
This request doesn't make much sense to me.. if you need an element to fill the viewport then use that element but it can't be multiple elements taking up the viewport like that, unless they're non-static positioned. Or try something obscure like throwing bottom negative margin on the body element while keeping it 100% height.. — meder omuraliev, Jul 13 '10 at 06:08
Cant think of any css rule that can possibly do that(switches on scroll position and element position). Using javascript to do it will be much simpler(6-12 lines jQuery). — tcooc, Jul 13 '10 at 14:37
Personall,y I'd add some markup and not obsess about being semantic or whatever. — JAL, Jul 13 '10 at 15:50
@Alex JL: I usually do that, but I want to try to build a site to target to PCs and to mobiles with the only difference being what css file gets loaded. That process would be much easier if the html contains only semantic markup and not design markup. — Jason Christa, Jul 13 '10 at 16:23
@Jason, please add HTML5 doctype, YUI reset CSS and simplify the example by removing not important styles. This will make others understand better your example, also will prevent the scrollbar from appearing. — sorin, Jul 15 '10 at 11:28
@Jason: wondering if you had taken a look at my solution yet. It meets the requirements you laid out for no extra markup, and not worrying about IE. — ScottS, Jul 15 '10 at 13:15

ScottS · Answer 1 · 2010-07-15T13:22:24.843

2

Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution:

   <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            }
        body {
            height: 100%;
            /*below for illustration only*/
            background: yellow;
            }

        #Header {
            position: relative;
            z-index: 1;
            height: 60px;
            margin-bottom: -60px;
            /*below for illustration only*/
            background: red;
            opacity: .8;
            }

        #Article {
            float: left;
            min-height: 100%;
            width: 69.9%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: blue;
        }

        #Aside {
            float: left;
            min-height: 100%;
            width: 30%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: green;
        }

        #Article:before,
        #Aside:before {
            content: ' ';
            display: block;
            height: 60px;
            width: 100%;
        }

        #Article:after,
        #Aside:after {
            content: ' ';
            display: block;
            height: 30px;
            width: 100%;
        }

        #Footer {
            position: relative;
            z-index: 1;
            height: 30px;
            margin-top: -30px;
            clear: left;
            /*below for illustration only*/
            background: pink;
            opacity: .8;
        }
    </style>

HTML is just:

<body>
    <div id="Header">Header</div>
    <div id="Article">Article</div>
    <div id="Aside">Aside</div>
    <div id="Footer">Footer</div>
</body>

edited Jul 15 '10 at 13:22

answered Jul 14 '10 at 17:36

ScottS

71,703
13
126
146

1

You have a vote from me because this was the only solution that respected the requirements and worked on 4/5 browsers. The only problem is that on IE it looks so bad that is not usable at all. Ca you do something for IE to make it acceptable (doesn't have to work, but it should not make the page unreadable). – sorin Jul 15 '10 at 15:58
If you feed IE7 (probably IE6 too, though have not tested yet... note it should be working in IE8) css that zero's out every negative margin in all four regions, then you have a readable file. – ScottS Jul 15 '10 at 16:11
With javascript, of course, you could simulate the `:before` and `:after` and have it work in all the browsers, but you would still want the default readable without script working. – ScottS Jul 15 '10 at 16:16
2

You forgot to include the "lorem ipsum" text in order to test how it does behave when you resize the page. Also more important you forgot to add - this will solve the rendering in IE7 ! – sorin Jul 15 '10 at 16:30
Well, I didn't really forget. The above was not intended to be a 'drop in place' solution (i.e. including `DOCTYPE`, etc.). I still have rendering issues in IE7 even with the `DOCTYPE` declared (I have a `DOCTYPE` in my test). The "lorem ipsum" was not originally in his post, so I never copied it over but used my own text to test with full content. I'm glad the solution is working for you. – ScottS Jul 15 '10 at 17:05
That is an interesting solution to overlay the header and the footer. Here is my solution for the moment that doesn't worry about having equal height columns, http://files.nextscreen.com/test.html . – Jason Christa Jul 15 '10 at 19:42
@Jason: I stand corrected, something is happening by setting `min-height` and `position: relative` on the `html`, because if one is set, but not the other it does not work (however, if both are not set, it also works). – ScottS Jul 15 '10 at 20:08
This works fine in Webkit and even works in Firefox without the reset stylesheet (as long as you kill the margin and padding). So there must be some css property that would make the body grow to its full height. – Jason Christa Jul 15 '10 at 20:34
@Jason: There is a property to make the `body` grow to full height, `height: 100%`, but the problem is then your `padding-bottom: 30px` on the `body` makes the `body` larger than window size and your footer never sits at the bottom of the window like you desire for short content. I'm sure you are aware of all this already, I only point it out to say that is the only way to make the `body` "grow to its full height." – ScottS Jul 15 '10 at 20:49
@Scott: Oddly enough setting height to 100% in Firefox cause more problems. The footer can rise to be in the middle of content. So it appears in some cases height auto > height 100%. – Jason Christa Jul 15 '10 at 21:00
@Jason: Yes, because the footer is then being set to fit the body height, which is only the height of the window plus the 30px of padding. That's my point, your solution does not allow for the body to fill the height for short content like mine does. – ScottS Jul 15 '10 at 21:10
@Scott: I updated my test to work better. I think it works in Webkit, FF, and IE. – Jason Christa Jul 15 '10 at 21:38
When I shorten your content, the footer forces me to scroll. Do you not get that effect (Firefox)? – ScottS Jul 15 '10 at 21:46
@Scott: I don't get a scrollbar until the footer touches the article but that is because there is no more vertical space on the screen to show both the contents of header->article->footer without a scrollbar. Do you get one before then? – Jason Christa Jul 15 '10 at 22:19
I'm at home right now, and here, my Firefox (on a PC) shows it as you state. But at work, my Firefox (on a Mac) showed a scroll bar. I'll have to double check that tomorrow. – ScottS Jul 15 '10 at 23:17
1

@Jason: Okay, Firefox and Safari on my Mac was showing the footer pushed down, but what was causing it was the top margins on both the `body` and the `h1` tag in the header. With those set to 0, I can confirm that your solution works also. I you change your answer or submit a different answer with the corrected code, I'll give you a +1 vote, as it also meets the criteria for your original request. – ScottS Jul 16 '10 at 13:06
@Scott: The YUI reset.css is supposed to zero those out. – Jason Christa Jul 16 '10 at 14:28
@Jason: Fair enough... at work, that site is blocked from my access, so therefore it was not loading the reset.css :-) – ScottS Jul 16 '10 at 14:38

score 1 · Answer 2 · edited Mar 26 '14 at 18:59

1

I think I figured this out:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
<style type="text/css">
    html {
        background-color: orange;
        height: 100%;
    }

    body {
        background-color: yellow;
        height: auto;
        min-height: 100%;
        position: relative;
    }

    ul {
        list-style: none;
    }

    p {
        margin-bottom: 10px;
    }

    header {
        background-color: red;
        display: block;
    }

    article {
        background-color: blue;
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 70%;
    }

    aside {
        background-color: green;
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 30%;
    }

    footer {
        background-color: pink;
        bottom: 0;
        height: 30px;
        left: 0;
        position: absolute;
        width: 100%;
    }
</style>

edited Mar 26 '14 at 18:59

Taryn

242,637
56
362
405

answered Jul 13 '10 at 16:06

Jason Christa

12,150
14
58
85

How many browsers did you test that in? Does absolute on `footer` not cause issues? It would help seeing your layout visually. – meder omuraliev Jul 13 '10 at 16:09
I used this style with my copy paste html in my question. It worked with there were only a few paragraphs and when there were lots of paragraphs spanning several screens. Have you tried it in Chrome and Firefox? – Jason Christa Jul 13 '10 at 16:19
It doesn't work in IE8 because IE won't style elements it does not know, ie: header, article, aside, footer. If they were all divs this would work in IE8. – Jason Christa Jul 13 '10 at 21:48
@Jason - see my answer for targeting IE. – meder omuraliev Jul 13 '10 at 23:57
+1 as I promised in the comment on my solution. Look's like we both ended up with something that worked per your requirements. – ScottS Jul 16 '10 at 14:39
1

One nice thing about yours is that IE7 works, and if you change your `body` tag definition to trick IE6 to give it `min-height` by doing the `height: auto !important` followed by the `height: 100%` then your solution works in IE6 also. – ScottS Jul 16 '10 at 14:52
@Scott: Equal height columns is a separate issue but you can put the article and aside in a div and do div{dispay:table} article,aside{dispay: table-cell}. To make it work everywhere you do div{overflow:hidden} article,aside{padding: 30000px; margin: -30000px}. – Jason Christa Jul 16 '10 at 15:00
I agree, I also noticed that mine are only equal height with short content, not with long content... oh well :-) – ScottS Jul 16 '10 at 15:03

score 0 · Answer 3 · answered Nov 14 '13 at 23:09

Another answer for those who only need to target the latest versions of browsers utilizing flexbox and viewport units.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            header {
                height: 60px;
            }

            article {
                flex: 1;
            }

            footer {
                height: 30px;
            }
        </style>
    </head>
    <body> 
        <header>
            <h1>Lorem Ipsum</h1>
        </header> 
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
            <p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
            <p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
        </article> 
        <footer>
            <span>Made by me.</span>
        </footer> 
    </body> 
</html>

score 0 · Answer 4 · answered Jun 30 '10 at 15:29

0

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="aside"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

answered Jun 30 '10 at 15:29

bpeterson76

12,918
5
49
82

2

That is similar to what I use right now, I just don't like having to put wrappers and pushes into the markup. I was wondering if there was a more pure way to accomplish this. – Jason Christa Jun 30 '10 at 16:00
Yeah, it's not ideal, but given the limitation that browsers such as IE force us UI guys into, there's not a ton of options out there. Here's another option that removes the "push" div: http://www.cssstickyfooter.com/html-code.html. Take it one step further with the outstanding 960 grid system here: http://signalkraft.com/sticky-footer-in-960-grid-system – bpeterson76 Jun 30 '10 at 16:25
2

Oh yeah, I am almost sure this can't be done in IE, which is why I limited it to just Firefox and Webkit browsers. – Jason Christa Jun 30 '10 at 16:28

score 0 · Answer 5 · answered Jul 13 '10 at 15:09

I think you're talking about the margin of 10-15 pixels below the footer. Try adding this code to your CSS;

body { margin-bottom:0px; }

The body has a default margin of 10-15 pixels so in order to remove it to flush your design to the top or bottom you have to tell the body to have a margin of zero.

Hope that helps.

score 0 · Answer 6 · answered Jul 13 '10 at 15:18

0

* { display:block; }

You are going to have to change the display to inline in your wrapper after that though.

answered Jul 13 '10 at 15:18

m0g

969
2
15
30

score 0 · Answer 7 · answered Jul 13 '10 at 17:54

First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets. On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.

With that said, there are a couple solutions if your layout was refined to:

<html>
...
<body>
<div id='page_container'>
    <div id='header'></div>
    <div id='contents'></div>
    <div id='footer'></div>
</div>
</body>
</html>

Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before. In that case, its fairly easy. The easiest solution would be:

<html>
<head>
    <title>Test page</title>
        <style>
            body{
                background-color:green;
                margin:0px;
            }
            #page_container{
                width:700px;
                margin-left:auto;
                margin-right:auto;
                display:table;
                height:100%;
            }
            #header{
                background-color:red;
                text-align:center;
                font-size:25px;
                font-weight:600;
                height:75px;
                display:table-row;
            }
            #contents{
                background-color:yellow;
                display:table-row;
            }
            #footer{
                background-color:blue;
                height:25px;
                display:table-row;
            }   
    </style>
</head>
<body>
    <div id='page_container'>
        <div id='header'>Title of your page</div>
        <div id='contents'>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
        </div>
        <div id='footer'>This is a footer</div>
    </div>
</body>
</html>

I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.

As a side note, the way I believe HTML should be designed is in small chunks. The html design you have laid out is sort of all left out in the open, without a home. I would much rather put everything in a page_container div, and then wrap all the page contents in a contents div. Then you could break up the contents into smaller chunks like sidebar1, sidebar2, mainbar, etc... — Azmisov, Jul 13 '10 at 18:10
One more note: the only other way I can think of doing it would be with a min-height:100% on the contents div. Apparently, however, specifying a min-height prevents any negative-margining/border-box styling. If there were a way to fix that, you could avoid using display:table and make it cross-browser. Another note: the height:100% on the page container doesn't work when a doctype is declared. You'd have to look into that for a fix, since I don't know one off the top of my head. — Azmisov, Jul 13 '10 at 18:39
There is a new CSS3 property 'box-sizing' that you can set to 'border-box' that will include padding and borders in the specified width instead them adding to the width. http://reference.sitepoint.com/css/moz-box-sizing — Jason Christa, Jul 13 '10 at 18:46
It doesn't work if you have min-height:100%; set. I guess the link says that too. I wonder why that is? — Azmisov, Jul 13 '10 at 19:07

Azmisov · Answer 8 · 2010-07-13T20:06:04.523

Okay, here is the alternative css that I was talking about. It works in Firefox, Safari, and Chrome. IE7/IE6 don't work, you'd probably have to a little tweaking to get that working. Opera has a small bug with the body margins. Other than that, it uses just basic CSS (unlike the display:table that isn't very compatible).

<html>
<head>
    <title>Test page</title>
    <style>
        body{
            margin:0px;
            background-color:green;
            margin-top:75px;
            margin-bottom:25px;
        }
        #page_container{
            max-width:700px;
            margin-left:auto;
            margin-right:auto;
            position:relative;
            height:100%;
            padding-top:75px;
            margin-top:-75px;
        }
        #header{
            background-color:red;
            text-align:center;
            font-size:25px;
            font-weight:600;
            height:75px;
            z-index:2;
            position:absolute;
            top:0px;
            width:100%;
        }
        #contents{
            background-color:yellow;
            width:100%;
            min-height:100%;
        }
        #footer{
            background-color:blue;
            height:25px;
        }    
    </style>
</head>
<body>
    <div id='page_container'>
        <div id='header'>Title of your page</div>
        <div id='contents'>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
        </div>
        <div id='footer'>This is a footer</div>
    </div>
</body>
</html>

Wow, if you just tweaked it a little and made it IE6-7 compatible, you'd be famous. I think this is the first solution I've seen.

@meder: Does using the plain tag put you in quirks mode? I didn't think it did. — Jason Christa, Jul 14 '10 at 00:43
@azimov - bad question. Lets see if you can find a solution that works with html5 doctype. — sorin, Jul 14 '10 at 19:14

score 0 · Answer 9 · answered Jul 13 '10 at 23:54

0

Since you mentioned that your solution worked except for IE, all you need to do is use JS to enable the styling of HTML 5 elements:

http://medero.org/finally.html

That would make the styles apply, but it still looks like, at least in IE6 it needs some extra help.

Is this close to what you need for IE?

answered Jul 13 '10 at 23:54

meder omuraliev

183,342
71
393
434

Luckily, I have ceased caring what it looks like in IE6. I feel if the markup is semantic it won't look pretty but any on IE6 will still get the idea. – Jason Christa Jul 14 '10 at 00:41
The shim works because the elements are colored, but IE8 must have display inline as the default instead of display block because except for the footer being at the bottom it is laid out different. – Jason Christa Jul 14 '10 at 13:05
right, all one would need to do is add css rules to make em `display block: article, nav, aside { display:block; }` ( and the other elements ) – meder omuraliev Jul 15 '10 at 21:45

Zuul · Answer 10 · 2010-07-16T14:40:10.300

0

Working and tested on:
Google Chrome
Safari
Opera
Internet Explorer
Firefox

EDITED CODE (added overflow:auto; to #aside and #Article to fix the overflow)

<!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html,body{height:100%;width:100%;margin:0;padding:0;background-color:red;}
          #Header,#Article,#Aside,#Footer{position:absolute;}
          #Header{top:0;left:0;width:100%;height:60px;background-color:blue;}
          #Article,#Aside{top:60px;overflow:auto;bottom:30px;}
          #Article{left:0;width:70%;background-color:green;}
          #Aside{right:0;width:30%;background-color:yellow;}
          #Footer{bottom:0;left:0;width:100%;height:30px;background-color:pink;}
        </style>
      </head>
      <body>
        <div id="Header">Header</div>
        <div id="Article">Article</div>
        <div id="Aside">Aside</div>
        <div id="Footer">Footer</div>
      </body>
    </html>

PS: Background colors are illustrative, thus the css can me more compact by avoiding repeated attributes!

edited Jul 16 '10 at 14:40

answered Jul 15 '10 at 22:08

Zuul

16,217
6
61
88

Zuul: your solution did not work. If I fill the "Article" with text then the "Footer" does not 'push down' but remains at the original window height which ends up being in the middle of the "Article"'s content. – ScottS Jul 16 '10 at 13:12
Just edited the code to fix the overflow on Article and Aside div. – Zuul Jul 16 '10 at 14:40
That works if a person doesn't mind that the scroll bars show up on the two divs separately as opposed to the whole page. However, the solution does not quite fit the spec's of the desire as laid out in the question. Jason wanted the footer to be pushed down when the content was tall enough to fill the screen, but remain fixed at the bottom for short content. Your solution keeps it fixed at all times. – ScottS Jul 16 '10 at 17:13

Making a footer not rise above the bottom of the screen without extraneous markup

10 Answers10

Linked