How to put footer at the bottom of a page with no content

Question

I have a simple landing page with a fullscreen background image and no other content. However, when I load this, the footer comes all the way up to the Navbar and stops the image from being fullscreen (image is fullscreen on pages with content). This is how it looks: https://i.stack.imgur.com/CtK4K.png

My CSS for the background image is the following:

.index {
  background: url('/Content/images/home2.jpg') no-repeat center center;
  background-size: cover;
  min-height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

Also, my Navbar is getting in the way of this image which I also need to rectify.

score 0 · Answer 1 · answered Mar 08 '18 at 15:58

0

Add this to your style:

position: fixed;
bottom: 0;

answered Mar 08 '18 at 15:58

M. van Laar

42
5

score 0 · Answer 2 · answered Mar 08 '18 at 16:03

0

you can put : footer{position:absolute; bottom:0;}

CodePen

answered Mar 08 '18 at 16:03

Yassine

76
1
8

score 0 · Answer 3 · edited Mar 08 '18 at 17:41

0

Or you can wrap everything else except footer in a div, then give it a

min-height: calc(100vh - 70px);

Change 70px to the real height of your footer.

edited Mar 08 '18 at 17:41

Michael Lihs

7,460
17
52
85

answered Mar 08 '18 at 16:59

GUAN YIXI

1
1

How to put footer at the bottom of a page with no content

3 Answers3