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導航欄固定底蓋內容

回答

相關問題