-1

[EDIT]

Since most of the answers are just things that I already tried and don't work and since I saw in the comments some ppl arguing over using or not java script I'll consider js answers too. Also someone was arguing about someones answer not beeing compatible withe some versions of IE. Honestly I don't care about IE because it's not a supported browser anymore, microsoft has edge now and if you still use an antique browser that it's not up to dat I don't really care It is not a huge project and if IE users have compatibility problems, that's life.

  • SHORT: Give me anything that works and also don't worry about compatibility as long as it works on most browsers in the last updates.

[/EDIT]

How can I keep a footer to the bottom of the page without this happening:

My code looks like this:

<body>
    <div id="wrapper">
        <center>
            <div id="navbar">
            <div><a class="current">HOME</a></div>
            <div><a>NEWS</a></div>
            <div><a>CONTACT</a></div>
        </div>
        </center>

        <div id="content">
            <center>
                <div class="card">
                    This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text.
                </div>
            </center>                
        </div>

        <div id="footer">
        </div>
    </div>
</body>

And the css:

body {
    margin: 0 auto;
}
#navbar {
    z-index: 100;
    padding: 0;
    margin: 0;
    position: fixed;
    height: 47px;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
}
#navbar > div {
    display: inline-flex;
    margin-left: -4;
}
#navbar > div a {
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
}
#content {
    margin-top: 60;
    margin-bottom: 15px;
}
#footer {
    width: 100%;
    height: 100px;  
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

I got rid of the visual css (bg and effects)

Dddsasul
  • 85
  • 2
  • 10

5 Answers5

2

EDIT: Working fiddle here: https://jsfiddle.net/r6paa676/

Sticky footers are can be pretty tricky. This is the resource I used to solve my sticky footer issue as most implementations did not account for the responsiveness issues.

http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive/

The gist of this is that you use the following code to calculate and push the footer down: 

$(document).ready(function(){
    $(window).resize(function(){
        var footerHeight = $('.footer').outerHeight();
    var stickFooterPush = $('.push').height(footerHeight);  
    $('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
    });     
    $(window).resize();
});

And this would be your HTML: 

<div class="wrapper">
    <header class="header">
        <h1>Some logo</h1>
        <ul class="nav">
            <li><a href="">Menu Links</a></li>
            <li><a href="">Menu Links</a></li>
            <li><a href="">Menu Links</a></li>
            <li><a href="">Menu Links</a></li>
        </ul>
    </header>

    <main class="main">
        <br>
        <p>This would be your main content area</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur error deleniti modi ratione dolor culpa nobis fugiat nesciunt obcaecati dignissimos quidem ex at quas illo laudantium voluptates consectetur repellendus.</p>
    </main>

    <div class="push"></div>

</div> <!-- /wrapper  -->

<footer class="footer">
    <p>Write some footery stuff here</p>
    <p>The kind that no ones cares about :D</p>
    <p>The kind of text that is so damn long that your footer height changes on a smaller screen.</p>
    <p><a href="http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive" style="color: #fff;">BACK TO DEMO</a></p>
</footer>
JPeG
  • 811
  • 6
  • 11
0

I don't understand you well but, if you want your footer to stay always at the bottom of the browser window use position: fixed; instead of absolute. In this way when you scroll to the bottom your content will be hidden from the footer. So, you can add margin-bottom or padding-bottom with the height of your footer to your #content div.

Simeon Atanasov
  • 19
  • 4
  • I don't want it fixed, It's in the title. I want a normal footer. If I have both the nav and footer fixed it will take too much of the page and there will be almost no room left to display the content. – Dddsasul Aug 12 '16 at 14:26
0

Browser support for flexbox: http://caniuse.com/#feat=flexbox

Browser support for calc: http://caniuse.com/#feat=calc

There are a few ways to do this. The easiest is to use a flexbox. You need to give the header/footer a fixed height (see edit below, no need for fixed heights), but keep the content in the middle dynamic and give it an overflow-y: scroll

also remember to give body/html a height of 100% or this wont work. The best part is, you dont need any javascript, its pure css! :)

here's an example:

https://jsfiddle.net/ahmadabdul3/of1m2pbe/4/

edit - you dont need to give the header/footer fixed heights with flexbox. they can be dynamic as well:

https://jsfiddle.net/ahmadabdul3/of1m2pbe/5/

html:

<div class='flex'>
  <header>
    content
  </header>
  <article>
    <div class='empty'>content</div>
    <div class='empty'>content</div>
    <div class='empty'>content</div>
    <div class='empty'>content</div>
  </article>
  <footer>
    content
  </footer>
</div>

css:

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

}
.flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header, footer {
  height: 100px;
  background-color: white;
}
article {
  flex-grow: 1;
  overflow-y: scroll;
  background-color: tomato;
}
.empty {
  height: 100px;
  margin: 20px 0;
}

if you dont wanna use flexbox because IE 11 only partially supports it, you can try this approach:

if you have a static height for the header/footer, you can give the body a height value of:

height: calc(100% - headerHeight + footerHeight) so if header/footer heights are 100px

height: calc(100% - 200px)

https://jsfiddle.net/ahmadabdul3/0xj8fu9c/4/

these are the only 2 clean/easy ways I know of to accomplish this without any javascript, or more complicated html/css markup

Abdul Ahmad
  • 9,673
  • 16
  • 64
  • 127
  • With the caveat that Flexbox does not work in IE9 and only provides partial support in IE10 and IE11... So not really the best way to do this. – JPeG Aug 12 '16 at 15:12
  • @JPeG OP never said it has to work on any specific browser, so I dont think you should be down-voting this answer – Abdul Ahmad Aug 12 '16 at 15:13
  • @JPeG lol you started it, take yours off mine and I'll do the same. I do have a valid reason for down-voting though. You have a javascript solution – Abdul Ahmad Aug 12 '16 at 15:23
  • No I provided a solution that works in all the modern browsers back to IE9 and actually solves the problem. I called out the partial support for Flexbox, you get upset, and then you go and correct your post anyway. Just proves that I was right. – JPeG Aug 12 '16 at 15:28
  • Resorting to name calling and taunts... Real mature. – JPeG Aug 12 '16 at 15:50
-1

Check this out: https://jsfiddle.net/r6paa676/1/

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

.page-wrapper {
    min-height: 100%;
    position: relative;
}

footer {
    background-color: #f0f;
    position: absolute;
    bottom: 0;
    width: 100%
}
Martin Gottweis
  • 2,721
  • 13
  • 27
-2

I have found one more solution with some changes... check this out.. [updated jsfiddle link..]https://jsfiddle.net/r6paa676/2/

`  .page-wrapper {
   min-height: 100vh;
   position: relative;
  }

  footer {
  background-color: #f0f;
  position: absolute;
  bottom: 0;
  width: 100%
 }

 .longer {
   height: 50px;
   background-color: #ddd;
 }`
Tajmul Ansary
  • 1
  • 2