How to fix a footer to the bottom of the page, NOT the bottom of the viewport

Question

How can I fix a footer to the bottom of my page? One page might be very long (in which case the user would need to scroll in order to see the footer) or the page might be short. (in which case the footer could be visible on page load). I am trying to avoid the situation where I have a footer that is not positioned at the bottom of the page when the page has little content.

if you did not give an height to your page and the footer is the last segment of your code it should be on the bottom of the page — CodeWeis, Mar 24 '16 at 20:27
Possible duplicate of [Fix footer to bottom of page](http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page) — a coder, Mar 24 '16 at 20:35

score 0 · Answer 1 · answered Mar 24 '16 at 20:33

There is few options. For example my favorite way to resolve this problem

<html>
<body>

<div class="wrapper">

  <div class="content"></div>

  <div class="footer"></div>

</div>

</body>
</html>
* {
      margin: 0;
      padding: 0;
    }
    html,
    body,
    .wrapper {
      height: 100%;
    }
    .content {
      box-sizing: border-box;
      min-height: 100%;
      padding-bottom: 90px;
    }
    .footer {
      height: 80px;
      margin-top: -80px;
    }

score 0 · Answer 2 · answered Mar 24 '16 at 20:35

0

body {min-height :100vh} 
footer {
margin-bottom : 0; 
position: relative
}

PS: sorry for bad formatting, i am on smartphone

answered Mar 24 '16 at 20:35

Yakke

54
4

How to fix a footer to the bottom of the page, NOT the bottom of the viewport

2 Answers2