Adding a footer that is always displayed at bottom of screen?

Question

How can i add a footer that is always at the bottom of the screen even when the page contents are very small

e.g of problem, lets say I have a page that doesn't have that much on display in it, the footer therefore becomes in the middle of the screen. Can I ensure that if the page doesn't have a lot of contents then the footer just be at the bottom of the screen?

UPDATE

I just want a footer that is at the bottom of the screen when there is not enough content to fill the whole screen (i.e I don't want the footer showing up in the middle of the screen) and then if there is enough content for it to just go down at the bottom of the page.

Possible duplicate of [How can I force my footer to stick to the bottom of any page in CSS?](http://stackoverflow.com/questions/5516910/how-can-i-force-my-footer-to-stick-to-the-bottom-of-any-page-in-css). From the question it sounds like you're looking for a [sticky-footer](http://stackoverflow.com/questions/tagged/css+html+sticky-footer)? — David Thomas, May 29 '11 at 21:17

thirtydot · Accepted Answer · 2017-04-22T17:34:51.593

You're after a "sticky footer", this article shows some of the techniques you can use:

https://css-tricks.com/couple-takes-sticky-footer/

Here's the flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL

HTML:

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

CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

score 17 · Answer 2 · answered May 29 '11 at 21:16

17

use the following css properties:

position: fixed;
bottom: 0px;

answered May 29 '11 at 21:16

Ciprian Radu

788
7
16

6

this works great, but i dont want it to be a sticky footer, if there is a lot of content on the page i just want it to go down to the bottom of the page. – May 29 '11 at 21:32
2

@Sean: `"if there is a lot of content on the page i just want it to go down to the bottom of the page"` that's **exactly** what a sticky footer does: http://ryanfait.com/sticky-footer/ - not much content: http://jsfiddle.net/KMQxC/ vs lots of content: http://jsfiddle.net/KMQxC/1/ Edit: the comment on your question: `"i just want one that is at the bottom of the screen when there is not enough content to fill the whole screen"` - I'm now really confused what it is you want. Sorry if I'm not understanding you here. – thirtydot May 29 '11 at 21:45
1

@ thirtydot my bad, i thought sticky footer was always on the at the bottom of the screen and not at the bottom of the page, i wil try out that example u linked to, sorry. – May 29 '11 at 21:52

ZurabWeb · Answer 3 · 2014-11-11T19:39:45.820

2

Here's a CSS only solution, no jQuery needed. Make the wrapper's minimum height 100% and position it relatively, then position footer absolutely to bottom left:

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

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Source

edited Nov 11 '14 at 19:39

answered Nov 10 '14 at 20:50

ZurabWeb

1,241
1
12
21

2

Link only answers will most likely be deleted, try to make it a stand alone answer, keeping the reference link :) – bummi Nov 10 '14 at 21:05

score 2 · Answer 4 · answered Jun 18 '18 at 02:34

You can also use sticky for the position as shown below:

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

You can run this code to see if this is the type fixed footer you are looking for.

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>

score 0 · Answer 5 · answered Nov 30 '19 at 15:54

0

Use bootstrap class

 <footer class="container-fluid text-center">
   <div class="footer navbar-inverse navbar-fixed-bottom">
     <p>Footer is here</p>
   </div>
 </footer>

answered Nov 30 '19 at 15:54

rashedcs

3,588
2
39
40

score 0 · Answer 6 · answered May 29 '11 at 21:17

You'll want to use a fixed position element that is bound to the bottom of the page.

Say you use a div to encompass the footer, you'll want some css like this:

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

You'll probably want to update the height and width when a user resizes the form. You probably will need to resize the width on pageload as well.

Adding a footer that is always displayed at bottom of screen?

6 Answers6

Linked