0

How to place a footer at the bottom of the page?

When using a class fixed-bottom, the footer covers the content when scrolling page.

<div class="sticky-top">
    <qipr-header></qipr-header>
    <qipr-sidenav></qipr-sidenav>
</div>
<section class="container-fluid">
    <div class="row">
        <div class="content offset-md-3 offset-lg-2 col-md-9 col-lg-10 mb-4 mt-2">
            <router-outlet></router-outlet>
        </div>
    </div>
</section>
<div class="fixed-bottom">
    <qipr-footer></qipr-footer>
</div>
user17260293
  • 85
  • 10
  • Does this answer your question? [Bootstrap footer at the bottom of the page](https://stackoverflow.com/questions/40853952/bootstrap-footer-at-the-bottom-of-the-page) – Aditya Dec 20 '21 at 05:54

2 Answers2

0

.fixed-bottom {
  position: fixed;
  bottom: 0;
}
<div class='fixed-bottom'></div>
HackNetAyush
  • 36
  • 4
0

  1. Create a parent (div or body) to place page elements (header, wrapper and footer) with relative position.

  2. Create your header with fixed position (for sticky header)

  3. Add your container for page content

  4. Create your footer without any position or display

.page-body {
   position: relative;
   width: 500px;
   font-family: arial;
}

.top-header {
   position: fixed;
   top: 0;
   left: 0;
   background: #efefef;
   border: 1px solid #ccc;
   border-radius: 0 0 10px 10px;
   height: 30px;
   width: 500px;
   margin: 0 10px;
   padding: 10px 15px;
   z-index: 9999;
}

.container {
   color: #414141;
   padding: 50px 10px 10px;
}

.footer {
   background: #efefef;
   border: 1px solid #ccc;
   height: 200px;
   width: 500px;
   padding: 10px 15px;
   border-radius: 10px;
}
<div class="page-body">
   <div class="top-header">Header</div>
   <div class="container">
      <p>1: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>2: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>3: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>4: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>5: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>6: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>7: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>8: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>9: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>10: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>11: Lorem ipsum dolor sit amet...</p>
   </div>
   <div class="footer">
      Footer!
   </div>
</div>
Hossein
  • 53
  • 9