设置页面底部没有位置的底部导航栏菜单：固定（引导，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中删除红色和蓝色的颜色，他们只是为了测试。

添加了以下图像，以便更好地解释什么是我的代码怎么回事 -