How to keep footers at the bottom of the page?

Question

This is my CSS code

footer {
    position: relative;
    height: 50px;
    width: 100%;
    background-color: white;
}
p.copyright {  
    position:absolute;
    width:100%;
    line-height:40px;
    color:red;
    vertical-align:bottom;
    text-align:center;
    bottom:0;
}

This is my aspx HTML code

<footer>
   <p class="copyright">
  Copyright 2017 Anime Toys</p>
    </footer>

I'm trying to keep footers at the bottom of all web pages. The problem that I'm facing is that some web pages contains small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath.

How do I solve this issue? Can someone fix my code?

score 1 · Accepted Answer · answered Mar 04 '17 at 09:55

You can do it with a container element with position: relative; and a footer with position: absolute; and bottom: 0;. The trick is to give the container a min-height: 100vh; to make sure, the footer is at least at the bottom of the page, even if the content before is less then the viewport height.

body {
  margin: 0;
}

.container {
  position: relative;
  min-height: 100vh;
}

footer {
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
}

p.copyright {
  line-height: 40px;
  color: red;
  text-align: center;
}

<div class="container">
  some text
  <footer>
    <p class="copyright">Copyright 2017 Anime Toys</p>
  </footer>
</div>

score 1 · Answer 2 · answered Mar 04 '17 at 10:48

Put your content into html5 sections and an outer container with a logical class like "wrapper" and set the following CSS. Please view full page from snipit to see it in action!

Cheers

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
    
    .wrapper {
        min-height: 100%;
        position: relative;
    }
    header{
        background-color: #dcdcdc;
        height: 100px;
        width: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background-color: white;
    }
    
    p.copyright {
        width: 100%;
        padding: 10px 0px;
        color: red;
        text-align: center;
        background-color: #f1f1f1;
    }

<!doctype html>
</head>
</head>

<body>
    <section class="wrapper">
        <header>

        </header>
        <section class="content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </p>
        </section>
        <footer>
            <p class="copyright">
                Copyright 2017 Anime Toys</p>
        </footer>
    </section>
</body>

</html>

score 0 · Answer 3 · answered Mar 04 '17 at 09:58

NB: Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
wrapper {
    min-height:100%;
    position:relative;
}
header {
    background:#ededed;
    padding:10px;
}
content {
    padding-bottom:100px; /* Height of the footer element */
}
footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

How to keep footers at the bottom of the page?

3 Answers3