在页面底部设置底部导航栏菜单，不带位置：固定（bootstrap，css3）

Question

我想更改我的 css，以便页面的底部菜单保留在那里（如固定）但没有位置：固定。

为什么？

确实，使用 Boostrap 3，我正在使用 navbar-fixed-bottom 。

但位置：固定在 Opera Mini 上的 is not supported at all，几乎占移动浏览器的 10%（参见 here）。

如何在没有 position:fixed 的情况下创建它？

3 个约束：

• 我从不想要任何滚动：这意味着如果视口变小（无论视口的大小：大、小、台式机、平板电脑...），菜单和图像都会变小并且永远不会任何水平或垂直滚动​​条。

• 并且我希望菜单保持在图像下方（图像的质量，无论是否失真，都不是我在这个问题中的重点）。

• 我只想要 html 和 css：没有 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="/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>

当然，去掉 div 中的红色和蓝色，它们只是为了测试。

添加了以下图片以更好地解释我的代码中发生的事情 -