内容上重叠的页脚行

Question

我为html页面中的内容行指定了最高值368px，页脚部分与内容重叠。如何将页脚始终放在页面底部而不与内容行重叠。换句话说，如果内容很长，它应该将页脚推到页面底部。它们都不应该与另一个重叠。

下面是我的代码示例

<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">[email protected]</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

将你的position: relative; top: 398px改为margin-top: 398px。它会解决您的问题。谢谢

<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">[email protected]</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

只需从具有position: relative属性的div中删除top: 398px即可。如果你仍然需要顶部空白区域然后使用margin-top: 398px，因为如果你删除position: relative比top: 398px不起作用。试试这个代码。

<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">[email protected]</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>