Bootstrap/CSS - Keep footer at bottom even without enough content

Question

I know this is a duplicate question, I've read through many questions on this particular question like this one.

But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.

Some combos I tried:

html, body{
    height: 100%;
    min-height: 100%;
}

html{
    height: 100%;
}

body {
    min-height: 100%;
}

html{
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    min-height: 100%;
}

My HTML layout:

<html>
    <head>
        ... stuff
    </head>
    <body class=".container">
        ... stuff
    </body>
</html>

score 2 · Answer 1 · answered Nov 29 '17 at 03:28

What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:

body {
  margin: 0;
}

div {
  padding: 5px;
}

.container {
  background: #DDD;
  height: 50px;
}

.footer {
  position: fixed;
  bottom: 0px;
  height: 20px;
  width: 100%;
  background: #DDD;
}

<body>
  <div class="container">Text</div>
  <div class="footer">Copyright</div>
</body>

Hope this helps! :)

score 2 · Answer 2 · answered Nov 29 '17 at 03:29

2

Solution :You can use the html 5 elements like Header, Article, Section, Footer And set there height and width according to your requirements...

answered Nov 29 '17 at 03:29

Mr. Roshan

1,777
13
33

score 2 · Accepted Answer · answered Nov 29 '17 at 03:34

2

You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.

I recommend using something like

body {
  height: calc(100vh - 100px);
}

if you want to leave 100 px for your header and footer

answered Nov 29 '17 at 03:34

Stephen Amsel

81
4

Thank you. This works for my laptop. I'll have to test how responsive this method is on other devices. – Valachio Nov 29 '17 at 19:09

score 1 · Answer 4 · answered Nov 29 '17 at 03:25

1

you can use this code to create a fixed footer at the bottom of your page

.yourfooterclass {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn

answered Nov 29 '17 at 03:25

Smokey Dawson

8,827
19
77
152

I do not want the footer to be stuck on the bottom of the viewport. I simply want the footer to be stuck to the bottom of the page; and if there is not enough content to fill the initial viewport, I still want the footer to be at the bottom – Valachio Nov 29 '17 at 03:56
1

Yes, but when there is more content than the height of viewport, footer should be under this content, off screen. – TheKitMurkit Mar 23 '18 at 12:47

score 0 · Answer 5 · answered Jan 25 '20 at 16:13

Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:

The html structure:

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>
</html>

And the CSS accordingly:

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

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Bootstrap/CSS - Keep footer at bottom even without enough content

5 Answers5