Keeping footer to the bottom (css)

Question

This seems like a popular question, but even after incorporating some of the suggestion, I don't get the desired result.

I have a footer and I want it to be at the bottom of the page. Here's my HTML and CSS: (the hi' are just placeholder content)

HTML:

<body>
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>

CSS:

.footer {
bottom:0;
 position: absolute;
 width:100%;  

}

body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;

}

Now if I have the position: absolute; in the .footer style, then the footer is at the bottom on page load, and stays at the same exact position when you scroll down. It also overlaps the content, as can be seen from the fiddle here

If I remove the position: absolute property, then the footer isn't at the bottom of the page, and will go directly below the previous element. See here to understand what I mean LINK

I want it to be at the bottom of the page. If there's minimal content on the age, then it should go all the way to the bottom, and if there's a lot of content before the footer then it should not overlap them and go below all of them. A jQuery solution is fine as well.

http://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen — channasmcs, Sep 30 '16 at 04:28

score 0 · Answer 1 · answered Sep 30 '16 at 03:39

0

Update ur css as follows

check the output in jsbin Link to Jsbin

.footer {
    position:relative;
    top:225px;



}

.footer {
 position:relative;
 top:225px;

  

}

body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>

</html>

answered Sep 30 '16 at 03:39

Mandarr Sant

457
9
22

Thanks for replying, but this is incorrect. I want the footer to be at the bottom, irrespective of window size. If say my window height was more than 225 px, then this answer would not hold true. Thanks though for taking the time to answer – keshinpoint Sep 30 '16 at 03:45
do u want fixed footer – Mandarr Sant Sep 30 '16 at 03:47
No, I want it to be regular footer you see on websites like stackoverflow – keshinpoint Sep 30 '16 at 03:47
then add some more content like add more hi and then check again it will remain at the bottom – Mandarr Sant Sep 30 '16 at 03:48
is it ok with fixed footer ? – Casper Sep 30 '16 at 03:52
@CasperSL what do u want to say? – Mandarr Sant Sep 30 '16 at 03:54
if you use position: fixed; footer will be at view-port bottom all the time – Casper Sep 30 '16 at 03:57

score 0 · Answer 2 · answered Sep 30 '16 at 04:01

I have update code check this,

CSS

.footer {
    bottom:0;
    position: fixed;
    width:100%;  
    margin-bottom: 0 !important;
}
.content {
    position: relative;
}
body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;
}

HTML

<div class="content">
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>
<div>
<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>
</div>

bootply

score 0 · Answer 3 · answered Sep 30 '16 at 04:14

Check out this wonderful CodePen by Chris Bracco, it'll solve your problem.

/**
 * Demo Styles
 */

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

score 0 · Answer 4 · answered Sep 30 '16 at 04:26

You should use position "fixed", but you will need to give your body tag a padding-bottom. Also the navbar needs a margin-bottom of zero.

.footer {
    position:fixed;
    bottom:0px;
    width:100%;
}
.footer.navbar {
    margin-bottom:0px;
}

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;
    padding-bottom:120px; // whatever size you need
}

Bootply: http://www.bootply.com/e1EQiagcBd

Jishnu V S · Answer 5 · 2016-09-30T04:41:36.820

I have liked your question, and i got a solution for this , please copy paste this to your html , it is worked for me

/* css */


* {
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}
html, body {
 height:100%;
 width:100%;
 float:left;
}
body {
 margin:0;
 position:relative;
}
header {
 float:left;
 width:100%;
 padding:40px;
 background:#666;
}
.letter_s {
 position:relative;
 float:left;
 width:100%;
 min-height: calc(100% - 160px);
}
footer {
 float:left;
 width:100%;
 padding:40px;
 background:#666;
}

<!-- HTML -->

<header></header><!-- /header -->

<div class="letter_s">
 <p>he soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soule soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution th is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution</p>
     
</div><!-- /.letter_s -->

<footer></footer><!-- /footer-->

type more letter or add something you can see what happens

score 0 · Answer 6 · edited Sep 30 '16 at 06:03

0

Try giving position: relative; to the html tag.

edited Sep 30 '16 at 06:03

Blue

22,608
7
62
92

answered Sep 30 '16 at 05:52

Siddhesh Kulkarni

332
3
14

score 0 · Answer 7 · answered Oct 21 '17 at 23:24

You can put a flexible spacer element between the footer and everything above it. This spacer element expands and contracts as much as necessary to keep the footer at the bottom of the page.

Here is the HTML code with the spacer div:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<ul>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
</ul>

<div class="spacer"></div>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>
</html>

And here is the CSS:

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.spacer{
  flex:1;
}

I've tested this code in my Chrome browser, and it works flawlessly.

You can read more about flexible boxes at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Adding an HTML element as a spacer might not be the recommended practice for styling web pages. But flexible spacers like this are commonly used in Android and iOS layouts. Such spacers are very useful for creating a stable layout that works with many different screen sizes.

Keeping footer to the bottom (css)

7 Answers7