How to make footer stay at bottom Bootstrap Studio

Question

I've inserted one of the pre-made footers into my template. The footer is usually within a block. However the most annoying this is that when there is little content the footer comes up, but with lots of content it remains at the bottom. How do I get it to stay at the bottom?

.footer-basic {
  background:#262324;
  bottom:0;
  width:100%;
  position:fixed;
}

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body {
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.42857143;
  color:#666666;
  background-color:#ffffff;
}

html {
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

html {
  font-size:10px;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

Possible duplicate of [Flushing footer to bottom of the page, twitter bootstrap](http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap) — ganchito55, Mar 27 '17 at 00:10

Jonathan Bartlett · Accepted Answer · 2017-03-26T20:01:36.077

1

Target the footer element and make

 position:fixed;
 bottom: 0;

Make sure to keep this order. It is crucial as CSS is Cascading and will not read the bottom: 0 if a position has not been previously defined.

Then make the container have a minimum height of 100vh.

edited Mar 26 '17 at 20:01

answered Mar 26 '17 at 19:24

Jonathan Bartlett

512
4
12

There you go. uploaded! – Hosh Adf Mar 26 '17 at 19:42
Try adding `min-height: 100vh` to the body element. – Jonathan Bartlett Mar 26 '17 at 19:45
Rearrange the order of the items in the `.footer-basic` styling so that `bottom` is after `position`, because of the way CSS works this could be the issue. – Jonathan Bartlett Mar 26 '17 at 19:50
You are a genius. It was ordering. I decided to add a row before the footer to give room for the content because it was being covered. Problem solved :) – Hosh Adf Mar 26 '17 at 19:59
I have added the working solution to the original answer. Glad I could help :) – Jonathan Bartlett Mar 26 '17 at 20:02

score 0 · Answer 2 · answered Nov 27 '18 at 13:11

0

Adding this to the body works for me: display: grid; grid-template-rows: 1fr auto;

answered Nov 27 '18 at 13:11

Iceflower S

144
3
18

How to make footer stay at bottom Bootstrap Studio

2 Answers2