Bootstrap导航栏固定底盖内容

当我需要滚动页面时，我的导览栏导航栏底部覆盖了内容。我已经尝试将padding-bottom设置为身体的65px，但这没有帮助。Bootstrap导航栏固定底盖内容

我的HTML

<!-- FOOTER --> 
<nav class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li> 
      <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li> 
      <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li> 
     </ul> 
    </div> <!-- End container --> 
</nav>

我的CSS

body { 
    padding-bottom: 65px; 
    padding-top: 65px; 
}

谁能帮我请：d在此先感谢。

来源

2016-05-15 Dennis Castelijns

将底部边距添加到HTML而不是填充到正文。当滚动到页面末尾时，这将防止页脚覆盖内容。如果你不想让页脚覆盖，那么你将不得不使用另一种方法，而不是固定的位置。

html { margin-bottom: 65px }

的jsfiddle：https://jsfiddle.net/azizn/b7Lq56kt/

html {margin-bottom: 65px} p {padding:2em; border: 1px dashed #CCC}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="cotainer-fluid"> <div class="container"> <h1>Lorem ipsum dolor sit.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p> <p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p> <p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p> <p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p> <p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p> </div> </div>  <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li> <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li> <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li> </ul> </div>  </nav>

来源

2016-05-15 21:27:53 Aziz

出于某种原因，下边距不起作用。这可能是页面的内容被PHP回显吗？ –

这应该不重要。请创建一个现场演示@ jsfiddle.net – Aziz

现有的答案是不行的，但它接近。不必为html元素或body元素（包括页脚和重叠内容）添加页边距，而是需要将边距添加到包含内容的元素，与页脚处于同一级别; .main-content div。

.main-content {margin-bottom: 65px} 
 

 
p {padding:2em; border: 1px dashed #CCC}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="cotainer-fluid main-content"> 
 
    <div class="container"> 
 
    <h1>Lorem ipsum dolor sit.</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p> 
 
    <p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p> 
 
    <p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p> 
 
    <p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p> 
 
    <p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p> 
 
    </div> 
 
</div> 
 

 
<!-- FOOTER --> 
 
<nav class="navbar navbar-inverse navbar-fixed-bottom"> 
 
    <div class="container"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li> 
 
      <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li> 
 
      <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li> 
 
     </ul> 
 
    </div> <!-- End container --> 
 
</nav>

来源

2017-11-02 17:52:42

Bootstrap导航栏固定底盖内容

回答

相关问题