Overlapping footer row on content

Question

I specified a top value of 368px for the content row in my html page, the footer section overlaps the content. How can I have the footer always at the bottom of the page without it overlapping the content row. In other words, if the content is lengthy it should push footer to the bottom of the page. None of them should overlap the other.

below is my code sample

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row" style="position: relative;
        top: 398px;">
    <div class="col-md-12">
      <h1 id="term-header">Lorem ipsum dolor sit amet</h1>

      <p>Lorem ipsum dolor sit amet, no qui prompta salutandi, sit ea labores vulputate. Pro an debitis recusabo tractatos. Zril sapientem quaerendum qui cu, qui erat quodsi praesent no. Putent quaeque platonem mea an. Mel causae nostrud luptatum ad, eu nostro. pro ei suas duis iisque.</p>

      <h2>Lorem ipsum dolor sit amet</h2>

      <ol>
      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>
      </ol>
    </div>
  </div>
  
  <footer>
    <div class="row" style="background: #1D2029; padding: 81px 140px 68px 140px">

      <div class="col-md-3">
      <h3 id="footer-address">Mucius pertinacia signiferumque ut vel</h3>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Register</a>
      <a href="#" class="footer-link">Gallery</a>
      <a href="#" class="footer-link">About</a>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Resources</a>
      <a href="#" class="footer-link">Blog</a>
      <a href="#" class="footer-link">Cities</a>
      <a href="#" class="footer-link">Careers</a>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Support</a>
      <a href="#" class="footer-link">FAQ</a>
      <a href="#" class="footer-link">Help</a>
      </div>

      <div class="col-md-3">
      <h2 id="footer-contact">contact us</h2>
      <h3 id="footer-contact-txt">123456789</h3>

      <h2 id="footer-contact">email address</h2>
      <h3 id="footer-contact-txt">addffghhhhjk@asd.com</h3>
      </div>
    </div>

    <div class="row" style="background: #000000; padding: 30px 100px;">

    <div class="col-md-12">
    <h3 id="footer-address">© 2019 All Rights Reserved.</h3>
    </div>


    </div>
  </footer>
</div>

Answer 1

Just remove position: relative from the div that has top: 398px property. If you still want top white space then use margin-top: 398px for that because if you remove position: relative than top: 398px won't work. Try this code.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row" style="margin-top: 398px;">
    <div class="col-md-12">
      <h1 id="term-header">Lorem ipsum dolor sit amet</h1>

      <p>Lorem ipsum dolor sit amet, no qui prompta salutandi, sit ea labores vulputate. Pro an debitis recusabo tractatos. Zril sapientem quaerendum qui cu, qui erat quodsi praesent no. Putent quaeque platonem mea an. Mel causae nostrud luptatum ad, eu
        nostro. pro ei suas duis iisque.</p>

      <h2>Lorem ipsum dolor sit amet</h2>

      <ol>
        <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

        <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

        <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

        <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

        <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>
      </ol>
    </div>
  </div>

  <footer>
    <div class="row" style="background: #1D2029; padding: 81px 140px 68px 140px">

      <div class="col-md-3">
        <h3 id="footer-address">Mucius pertinacia signiferumque ut vel</h3>
      </div>

      <div class="col-md-2">
        <a href="#" class="footer-link">Register</a>
        <a href="#" class="footer-link">Gallery</a>
        <a href="#" class="footer-link">About</a>
      </div>

      <div class="col-md-2">
        <a href="#" class="footer-link">Resources</a>
        <a href="#" class="footer-link">Blog</a>
        <a href="#" class="footer-link">Cities</a>
        <a href="#" class="footer-link">Careers</a>
      </div>

      <div class="col-md-2">
        <a href="#" class="footer-link">Support</a>
        <a href="#" class="footer-link">FAQ</a>
        <a href="#" class="footer-link">Help</a>
      </div>

      <div class="col-md-3">
        <h2 id="footer-contact">contact us</h2>
        <h3 id="footer-contact-txt">123456789</h3>

        <h2 id="footer-contact">email address</h2>
        <h3 id="footer-contact-txt">addffghhhhjk@asd.com</h3>
      </div>
    </div>

    <div class="row" style="background: #000000; padding: 30px 100px;">

      <div class="col-md-12">
        <h3 id="footer-address">© 2019 All Rights Reserved.</h3>
      </div>


    </div>
  </footer>
</div>

Answer 2

Change your position: relative; top: 398px to margin-top: 398px. It'll resolve your issue. Thanks

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row" style="margin-top: 398px;">
    <div class="col-md-12">
      <h1 id="term-header">Lorem ipsum dolor sit amet</h1>

      <p>Lorem ipsum dolor sit amet, no qui prompta salutandi, sit ea labores vulputate. Pro an debitis recusabo tractatos. Zril sapientem quaerendum qui cu, qui erat quodsi praesent no. Putent quaeque platonem mea an. Mel causae nostrud luptatum ad, eu nostro. pro ei suas duis iisque.</p>

      <h2>Lorem ipsum dolor sit amet</h2>

      <ol>
      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>
      </ol>
    </div>
  </div>
  
  <footer>
    <div class="row" style="background: #1D2029; padding: 81px 140px 68px 140px">

      <div class="col-md-3">
      <h3 id="footer-address">Mucius pertinacia signiferumque ut vel</h3>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Register</a>
      <a href="#" class="footer-link">Gallery</a>
      <a href="#" class="footer-link">About</a>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Resources</a>
      <a href="#" class="footer-link">Blog</a>
      <a href="#" class="footer-link">Cities</a>
      <a href="#" class="footer-link">Careers</a>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Support</a>
      <a href="#" class="footer-link">FAQ</a>
      <a href="#" class="footer-link">Help</a>
      </div>

      <div class="col-md-3">
      <h2 id="footer-contact">contact us</h2>
      <h3 id="footer-contact-txt">123456789</h3>

      <h2 id="footer-contact">email address</h2>
      <h3 id="footer-contact-txt">addffghhhhjk@asd.com</h3>
      </div>
    </div>

    <div class="row" style="background: #000000; padding: 30px 100px;">

    <div class="col-md-12">
    <h3 id="footer-address">© 2019 All Rights Reserved.</h3>
    </div>


    </div>
  </footer>
</div>