Question

我想改变我的css，以便页面底部菜单保持不变（如固定），但没有位置：已修复。

为什么？

确实，使用Boostrap 3，我使用的是navbar-fixed-bottom。

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

如何在没有位置的情况下创建：固定？

3个约束：

我从不想要任何滚动：这意味着如果视口变小（无论视口的大小如何：大，小，桌面，平板电脑......），菜单和图像都会变小，从不任何水平或垂直滚动条。
我希望菜单保持在图像下方（图像的质量，扭曲与否，在这个问题中不是我的观点）。
我只想要html和css：没有javascript和jquery。感谢

以下是我想要做的一个例子：

enter image description here

以下是我使用固定位置的当前代码：

<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中删除红色和蓝色，它们仅用于测试。

添加了以下图片，以便更好地解释我的代码中发生了什么 - enter image description here

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

1 个答案: