設置頁面底部沒有位置的底部導航欄菜單：固定（引導，css3）

Question

我想改變我的CSS，使頁面有底部菜單呆在那裏（像固定），但沒有位置：固定。

爲什麼？

事實上，使用Boostrap 3，我使用的是navbar-fixed-bottom。

但是位置：固定is not supported at all在Opera Mini上幾乎佔移動瀏覽器的10％（請參閱here）。

我該如何創建這個沒有位置：固定？

3約束：

• 我從來沒有想任何滾動：這意味着如果視口變小（無論視口的大小：大，小，臺式機，平板電腦......）時，菜單和圖像將變得更小，永遠不會有任何水平或垂直滾動​​條。

• 我希望菜單留在圖像下面（圖像的質量，是否扭曲，這不是我在這個問題上的觀點）。

• 我只想要html和css：no javascript和jquery。感謝

這裏是我想要做什麼的例子：

下面是使用固定位置的我當前的代碼：

<div> 
    <nav role="navigation" class="navbar navbar-default navbar-fixed-bottom"> 
     <div class="container"> 
      <!-- Title --> 
      <div class="navbar-bottom pull-left"> 
       <a href="/" class="navbar-brand">BIGGA</a> 
      </div> 

      <!-- The non-Collapsing items on navbar-LEFT --> 
      <div class="collapse navbar-collapse navbar-left"> 
       <!-- pull-right keeps the drop-down in line --> 
       <ul class="nav navbar-nav pull-right"> 
        <li> 
        <a href="/news">News</a> 
        </li> 
       </ul> 
      </div> 

      <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> 
      <div class="navbar-bottom pull-right"> 
       <ul class="nav pull-left"> 
        <!-- This works well for static text, like a username --> 
        <li class="navbar-text pull-left">User Name</li> 
        <!-- Add any additional bootstrap header items. This is a drop-down from an icon --> 
        <li class="dropup pull-right"> <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdow-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> 

         <ul class="dropdown-menu"> 
          <li> <a href="https://stackoverflow.com/users/id" title="Profile">Profile</a> 

          </li> 
          <li> <a href="/logout" title="Logout">Logout </a> 

          </li> 
         </ul> 
        </li> 
       </ul> 
       <!-- Required bootstrap placeholder for the collapsed menu --> 
       <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 

       </button> 
      </div>      


      <!-- Additional navbar items on the LEFT of the PULL-RIGHT stuff above --> 
      <div class="collapse navbar-collapse navbar-right"> 
       <!-- pull-right keeps the drop-down in line --> 
       <ul class="nav navbar-nav pull-right"> 
        <li><a href="/locator">Locator</a> 

        </li> 
        <li><a href="/extras">Extras</a> 

        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

Answer 1

我會給你一個想法，以及如何解決。

使用2個div，一個接一個。第一個div將包含你的圖片，或者你想要放入主要內容區域的內容。它的高度是90％，當然你可以改變或修改它。第二個div是你的菜單欄，高度是10％，根據你的需要修改它。注意.image_content類中的overflow:auto，它將包含您的主要內容，無論其長度如何，並將菜單欄保留在底部。

<style> 
.main_wrapper { 
    height:100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    z-index:9999; 
} 
.image_content { 
    height:90%; 
    background:red; 
    overflow:auto; 
} 
.bottom_menu { 
    height:10%; 
    background:blue; 
} 
</style> 

<div class="main_wrapper"> 
    <div class="image_content"> 
     Your main content here 
    </div> 
    <div class="bottom_menu"> 
     Menu here 
    </div> 
</div> 

當然，從divs中刪除紅色和藍色的顏色，他們只是爲了測試。

添加了以下圖像，以便更好地解釋什麼是我的代碼怎麼回事 -