CODEWITHSUNDEEP
htmlcssangularfooter
ashley g
ashley g

Reputation: 885

Footer wont stick to the bottom of the page

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.

enter image description here

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;   
}

Upvotes: 0

Views: 1704

Answers (4)

Dusan Knezevic
Dusan Knezevic

Reputation: 121

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;
}

Upvotes: 0

raj
raj

Reputation: 21

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;
}

Upvotes: 2

Ash
Ash

Reputation: 11472

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.

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

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;   
}

Upvotes: 0

Related Questions