Footer wont stick to the bottom of the page

Question

I am having great difficulty making my footer stick to the bottom of the page in my angular application. I have tried a number of different things but cant seem to figure out what i am doing wrong. I have defined the height of the container div so i know the viewport size therefore the footer should be able to identify the bottom of the viewport and stay there. However as the content grows the footer does not grow with the content.

HTML:

 <body style="margin:0; padding:0; height:100%;">
  <app-root></app-root>
</body>

app-root html:

<div class="container">
  <app-header id="header"></app-header>    
  <div id="body">
    <router-outlet></router-outlet>
  </div>
  <app-footer id="footer"></app-footer>
</div>

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   height:100%;
   position:relative;
}
#header {
   padding-bottom:10px;
}
#body {
   padding:10px;
   padding-bottom:10px;  
}
#footer {
   position: absolute;
   bottom:0;
   width:100%; 
   height:60px;   
}

why not try using a [flex approach](https://stackoverflow.com/questions/29069498/how-to-make-a-sticky-footer-using-css#answer-52178548) (also does your html appear inside your body tag or is that actually how it is?) — Pete, Dec 11 '19 at 10:59
I have tried the flexbox approach and have had no luck. Yes, it is a angular based application and the 'app-root' is the second chunk of html you see — ashley g, Dec 11 '19 at 11:02

score 2 · Answer 1 · edited Dec 11 '19 at 12:05

2

Put your app-footer in separate div and add the following class:

<div class="fixed-bottom">
<app-footer></app-footer>
</div>

in style:

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

edited Dec 11 '19 at 12:05

ivaigult

6,198
5
38
66

answered Dec 11 '19 at 11:32

raj

21
1
1
6

score 1 · Answer 2 · answered Dec 11 '19 at 11:46

Using flexbox is probably going to offer the cleanest implementation and has good browser support.

Here is what I've done in the past, noting that the content is just there so the snippet displays as intended.

The structure below is similar to your question. You may need to break it down into components as suited for your app. Note my usage of class selectors instead of id selectors, as another answer noted there was a typo in yours for #container and .container.

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

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: powderblue;
}

.content {
  flex: 1 0 auto;
  background-color: salmon;
}

.footer {
  flex-shrink: 0;
  background-color: orchid;
}

<body>
  <app-root>
    <div class="container">
      <header class="header">
        <app-header>header content</app-header>
      </header>
      <main class="content">
        <router-outlet>main content</router-outlet>
      </main>
      <footer class="footer">
        <app-footer>footer content</app-footer>
      </footer>
    </div>
  </app-root>
</body>

This answer is based on a snippet from Sticky Footer, Five Ways using the flexbox option. You can view alternatives in that article.

Nice solution, The problem was happening due to me absolutely positioning an element with the content div . — ashley g, Dec 11 '19 at 11:57

Lalji Tadhani · Answer 3 · 2019-12-11T11:16:34.873

0

1) typo error css assign to id #container HTML use to class

2) Remove height #container

3) Add padding-bottom #body is footer height;

changes CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   /*height:100%;*/ /*Remove this*/
   position:relative;
}
#header {
   padding-bottom:10px;
}
#body {
   padding:10px;
   padding-bottom:60px; /* Add Padding footer Height*/
}
#footer {
   position: absolute;
   bottom:0;
   width:100%; 
   height:60px;   
}

edited Dec 11 '19 at 11:16

answered Dec 11 '19 at 11:11

Lalji Tadhani

14,041
3
23
40

updated screenshot of the output now with corrected typo. I have also tried moving the footer out of the container but still to no avail. – ashley g Dec 11 '19 at 11:16
the same issue can we continue the discussion in chat – ashley g Dec 11 '19 at 11:20
hmm something else must be interfering with the styling – ashley g Dec 11 '19 at 11:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/204046/discussion-between-lalji-tadhani-and-ashley-g). – Lalji Tadhani Dec 11 '19 at 11:27

score 0 · Answer 4 · answered Jul 21 '21 at 15:02

Using flexbox this should be quite simple.

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

Whatever is your main content container (in this example it is .main-content class, apply this flex style to force it takes max height pushing the footer to the bottom.

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

.content {
  flex: 1 0 auto;
}

Footer wont stick to the bottom of the page

4 Answers4