在页面底部设置没有 position:fixed 的底部导航栏菜单（bootstrap、css3）

Question

我想更改我的 css 以便页面底部菜单保留在那里（如固定）但没有 position:fixed.

为什么？

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

但是 position:fixed is not supported at all on Opera Mini which accounts for 10% almost of mobile browsers (see 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 class 中的 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中的红色和蓝色，它们只是为了测试。

添加了下图以更好地解释我的代码中发生了什么 -

在页面底部设置没有 position:fixed 的底部导航栏菜单（bootstrap、css3）

Set bottom navbar menu on the bottom of the page without a position:fixed (bootstrap, css3)

html

css

twitter-bootstrap

twitter-bootstrap-3