sticky footer and fixed header

Question

I have tried couples of solution on google for sticky footer. My current testing one works fine but the footer will not push down if content is overflow a page.

Questions: 1. footer will not push down if content is overflowed. How can I make it to push down when there is more content?

As screen re-size to smaller, the header height does not fixed, thus the nav is overlapping with the header. How should I adjust my header so that even with a smaller screen the header will stay the same as full screen mode?

css:

/* basic set up*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #CCCC52;
    width: 100%;
    height: 6%;
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: blue;
    margin-bottom: 0;
}
/* header */
    .header p, .header ul, .header ul li {
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    .header p, .header ul {
        margin: 0.5% 0 0 0;
        padding: 0;
        width: 50%;
    }
        .header p {
            margin-left: 2%;
            width: 48%; 
        }
        .header ul {
            text-align: right;
            list-style-type: none;
        }
        .header ul li {
            margin: 0 5%;
            padding: 1.5% 2%;
            background-color: #e44c65;
        }

Here is what I got so far. Fiddle DEMO

P.S. ** Sorry that I forgot to mention but I actually have to support I.E. 7 as well. I know...its stupid...

P.S. I have tried to mess with the recommended solution but its either header not fixed or I.E. 7 not supported(:after not support in I.E. 7)

Well for one, you should not rely so heavily on position absolute. You're going to run into issues like this every step of the way, if you do. **[Here's a sticky footer method that I'd recommend](http://ryanfait.com/sticky-footer/)** I usually use almost identical method myself. As far as fixed header goes, you should be fine just setting `#header { position: fixed; }` — Joonas, Mar 05 '15 at 10:33

score 0 · Answer 1 · answered Mar 05 '15 at 10:36

0

  <div class="content">
   All content goes in here
 <\div>

 .content{
   Min-height:100%;
 }

Your first question solution

answered Mar 05 '15 at 10:36

Daniel

1,438
6
20
37

score 0 · Accepted Answer · edited Jul 06 '15 at 23:12

Questions: 1

Just put the <div class="footer"> into the <div class="wrapper">

Questions: 2

You use % at your margin and padding. e.g. margin: 0.5% 0 0 0; And height: 6%; for the .header. This can cause some problems on window resize.

EDIT:

Maybe you want to use some html5?

There are the <header> and <footer> tags. So you don´t have to use a div for everything.

Watch out for IE8 and below. You need some fix to use html5 tags there.

sticky footer and fixed header

2 Answers2