内容上的页脚行重叠

时间：2019-03-24 00:29:06

标签： html css

我为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">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>

2 个答案:

答案 0 :(得分：1)

将您的df = df.groupby('Sent_ID').Word.apply(' '.join).reset_index() print(df) Sent_ID Word 0 1 Obesity in Low- and Middle-Income Countries : ... 1 2 We have reviewed the distinctive features of e... 2 3 Obesity is rising in every region of the world... 3 4 In LMICs , overweight is higher in women compa... 4 5 Overweight occurs alongside persistent burdens... 5 6 Changes in the global diet and physical activi... 6 7 Emerging risk factors include environmental co... 7 8 Data on effective strategies to prevent the on... 8 9 Expanding the research in this area is a key p... 9 10 MICROCEPHALIA VERA 10 11 Excellent reproducibility of laser speckle con... 11 12 We compared the inter-day reproducibility of p... 12 13 We also tested whether skin blood flow assessm... 13 14 Skin blood flow was evaluated during PORH and ... 14 15 Data are expressed as cutaneous vascular condu... 15 16 Reproducibility is expressed as within subject... 16 17 Twenty-eight healthy participants were enrolle... 17 18 The reproducibility of the PORH peak CVC was b... 18 19 Inter-day reproducibility of the LTH plateau w... 19 20 Finally , we observed significant correlation ... 20 21 The recently developed LSCI technique showed v... 21 22 Moreover , we showed significant correlation b... 22 23 However , more data are needed to evaluate the... 23 24 Positive inotropic action of cholinesterase on... 24 25 The putative chloride channel hCLCA2 has a sin... 25 26 Calcium-activated chloride channel ( CLCA ) pr... 26 27 Genetic and electrophysiological studies have ... 27 28 The human CLCA2 protein is expressed as a 943-... 28 29 Earlier investigations of transmembrane geomet... 29 30 However , analysis by the more recently derive... 更改为position: relative; top: 398px。它将解决您的问题。谢谢

margin-top: 398px

答案 1 :(得分：0)

只需从具有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">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>
相关问题
最新问题