CODEWITHSUNDEEP
htmlcss
linyuanxie
linyuanxie

Reputation: 787

How to keep <footer> always at the bottom of page,( not screen) in html5

I know this is may be a old question, But I have tried many way, if the content of is light such as 2 row, the footer will come up and leave a lot of space. Here is my code:

<html>
 <head></head>
<body>
  <div class='navbar'></div>
  <div class='maincontent'> main content</div>
  <footer class='footer-box'>
    footer content
  </footer>
</body>
</html>

I try to set position to either relative or absolute but none of them works fine for me, I need to always position the footer at the bottom of page, no-matter the content of maincontent. any idea? Thanks a lot!

Upvotes: 0

Views: 1702

Answers (5)

Amarok24
Amarok24

Reputation: 94

Try this :

footer.footer-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

Upvotes: -1

Claudio King
Claudio King

Reputation: 1616

Even if the question is answered I want to propose a solution with flexboxes.

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  background: blue;
}

footer{
  height: 70px;
  background: yellow;
}
<main>
  Main content
</main>

<footer>
  Footer
</footer>

Upvotes: 0

shennan
shennan

Reputation: 11676

As far as I can tell, you want to have the footer at the bottom of the viewport, unless the main content is big enough to reach it, in which case you want the footer to come at the bottom of the page.

In my opinion, this is the best/cleanest way to do that:

Note that this is not a JavaScript solution, I have added the JS so you can see the effect of a growing .maincontent block. Run the code snippet below to see what I mean.

function addContent() {

  $('.maincontent').append('<p>more content</p>');

}
html {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  min-height: 100%;
}
.maincontent {
  padding-bottom: 1em;
  /* or the footer height */
}
.footer-box {
  position: absolute;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>

<head></head>

<body>
  <div class='navbar'>
    <button onclick="javascript:addContent()">add content</button>
  </div>
  <div class='maincontent'>main content</div>
  <footer class='footer-box'>
    footer content
  </footer>
</body>

</html>

Upvotes: 3

Lewis Smith
Lewis Smith

Reputation: 1345

It appears that you are using bootstrap, so this will work for you

 <div class="navbar navbar-default navbar-fixed-bottom">
    </div>

Upvotes: 0

user2232273
user2232273

Reputation: 4974

add css property to the footer element:

.footer-box{
position:absolute;
bottom:0;
}

LIVE DEMO

Upvotes: -1

Related Questions