How to place the footer to the bottom of the page a size when using a card in angular

Question

I am using a card and after the card I put my footer. But the footer is of very large size as compared to the one mentioned in its css.

Image -

Code -

app.component.html -

<div class="card" id="card-css">
    <div class="card-body">
  //code

    </div>
  </div>

  <hr class="line" color="#f5821f;" />

  <div class="footer text-right" style = "height:50px !important" >
    <label style="color: black">© 2018 ICICI. API Developer</label>
  </div>

app.component.css

html, body {
  height: 100%;
}

.footer {
  position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white; 
   color: black;
   text-align: center; /* .push must be the same height as .footer */
   }

Answer 1

If I am getting the question correctly then I think you want your footer at bottom of the page. For this you just need to change your bellow css.

position: relative

to

position: fixed;
margin:10px;

and for text size you can add the below css if you want.

font-size: 25px;