Sticky Footer (with unknown Height) with pur CSS3 using HTML5 for all browsers

Question

I am trying to implement a STICKY FOOTER (with unknown Height) for my website in HTML5 and CSS3. I have tried so many ways, but there seems to be a problem with the margin of my main part.

Here is what I have:

 body {
   background: #000;
   font-family: Arial;
 }
 main {
   margin: 50px;
 }

<body>
  <header>
  </header>

  <div id="first">
  </div>

  <main id="main">
  </main>

  <footer>
  </footer>
</body>

The HEADER and FOOTER are equal to the body - so, no more code.

Please note: I have used the reset.css to do everything on my own!

Here is what I tried the last hours:

Please do not recommend the FLEXBOX - that does not work on mobile devices and in the IE 10.

Okay, but what about my smartphone and tablet? The Safari on my iPhone does not support the FLEXBOX. :/ — sjantke, Sep 24 '14 at 13:04
Thanks, but I need a Footer with a Height, that I do not know. I have edited that. — sjantke, Sep 24 '14 at 13:10
FLEXBOX does not work in IE 10 by just using the -ms- prefixes... just tried. :/ — sjantke, Sep 24 '14 at 13:27
@Exception Flexbox works in IE 10 with `-ms-` prefixes, are you sure you prefixed the correct properties? — rink.attendant.6, Sep 24 '14 at 19:43

score 1 · Answer 1 · answered Sep 24 '14 at 13:15

I just tried one thing for sticky footer , i am adding its html and css3 code.

I am also giving the reference site.

HTML

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

The body content should be inside the wrap.

css

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

I referred the following website for the sticky footer

http://www.cssstickyfooter.com

Thanks, I know that it works, but I need a Footer where its Height is not known. — sjantke, Sep 24 '14 at 13:17

score 0 · Accepted Answer · answered Sep 24 '14 at 13:39

0

I have made an example for you using jQuery http://jsfiddle.net/ed4xe1z9/

HTML

   <div id="wrap">
        <header>
            <p>The header</p>
        </header>
        <div id="main">
            <div class="the-margin">
                <div id="first">
                     <h1>First Content</h1>

                </div>
                 <h2>Main Content</h2>

            </div>
        </div>
    </div>
    <footer>
        <p>Sticky footer</p>
    </footer>

CSS

        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        #wrap {
            min-height: 100%;
        }
        body {
            background: #000;
            font-family: Arial;
            color: #fff;
        }
        #main {    
            overflow:auto;
        }
        .the-margin{
            margin: 50px;
        }
        footer {
            position: relative;
            clear:both;
        }

jQuery on document ready

$('#main').css('padding-bottom', $('footer').height());
$('footer').css('margin-top', -$('footer').height());

answered Sep 24 '14 at 13:39

Bojan Petkovski

6,835
1
25
34

1

Didn't saw that you want it in pure css :) Just saw the unknown height of the footer :) – Bojan Petkovski Sep 24 '14 at 13:46
No problem, Bojan! ;) That solved my problem. JS was not the way I wanted to solve it, but it works - so, who cares. ;) – sjantke Sep 24 '14 at 13:58
Oh just one thing: Which jQuery do you think I should pick for my script? The latest one `` makes the website very slow... – sjantke Sep 24 '14 at 13:59
You need to load a minified version of jQuery, and I always use the one provided from google – Bojan Petkovski Sep 24 '14 at 14:04
Okay, thank you. And why don't you use the one from jQuery? I mean, you do not buy a Porsche at the BMW Store - you go to a Porsche Store, don't you? :P – sjantke Sep 24 '14 at 14:07
Just a habit I guess :) – Bojan Petkovski Sep 24 '14 at 14:19

Sticky Footer (with unknown Height) with pur CSS3 using HTML5 for all browsers

2 Answers2