CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
jomskris
jomskris

Reputation: 305

Fixed footer overlap content

I am using Bootstrap and I am trying to have a footer at the bottom of the page. I am using class="fixed-bottom". Problem is when I have a lot of content footer is overlapping content. I have layout like this:

<body>
  <main class="main">
    <div class="page-loader" style="display: none;">
        <div class="page-loader__spinner">
            <svg viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
            </svg>
        </div>
    </div>
    <header class="header">          
    </header>  
    <section class="content">

            <footer class="footer fixed-bottom">
                <div class="footerProfil hidden-lg-up">
                    <p>
                        content
                    </p>
                </div>

            </footer>
    </section>
   </main>
</body>

This is my CSS

body, html {
  background-color: #fafafa !important;
}
body {
   font-family: 'Noto Sans', sans-serif!important;
   font-size: 1rem;
   font-weight: normal;
    line-height: 1.5;
   color: #707070;
 }

.footer {
  text-align: center;
   padding-top: 4rem;
   padding-right: 1rem;
   padding-bottom: 3rem;
   padding-left: 1rem;
  }

.fixed-bottom {
   bottom: 0;
   left: 0;
}
  .content:not(.content--boxed):not(.content--full) {
     padding: 102px 30px 400px 300px;
 }
 .fixed-bottom, .fixed-top {
   position: fixed;
   right: 0;
   z-index: 1030;
 }

Can anybody help me with this? Thank you all

Upvotes: 1

Views: 1134

Answers (1)

demkovych
demkovych

Reputation: 8847

You need to add padding-bottom: XXpx to .content class, where xx - is the footer height

Upvotes: 1

Related Questions