html - 导航栏底部的图标不会根据框架的大小调整而移动

Question

我试图在导航栏底部放置一些东西。

示例代码:https://jsfiddle.net/545cdqb2/1/

这部分代码有问题。

.push-to-bottom 
{
  position: absolute;
  bottom: 0px;
  height: 100px;
  width: 100%;
}

调整框架大小时，“红色 div”隐藏了它后面的导航栏元素，我无法点击它们。

Issue screenshot

Answer 1

就用flexbox系统吧。我在导航栏和红色容器周围做了一个包装。去掉红框的绝对定位!

@media (min-width: 768px) {
    #navWrapper {
        height: 100vh; 
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    #navbar {
        flex-grow: 1;
    }
}

.push-to-bottom {
    height: 100px;
    width: 100%;
    flex-shrink: 0;
}

使用 flexbox 系统，如果你给 navbar 的 flex-grow 设置为 1，你可以很容易地将两个容器(nav 和 red 容器)分开。将它包装在非移动版本的媒体查询中，否则它会崩溃你的设计!红色框使用 flex-shrink: 0 来保持其 100px 的高度!

html代码(重要片段)

<div id="navWrapper" class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#">Brand Name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-font-family">
            <li><a href="#">Nav 1</a></li>
            <li><a href="#">Nav 2</a></li>
            <li><a href="#">Nav 3</a></li>
            <li><a href="#">Nav 4</a></li>
            <li><a href="#">Nav 5</a></li>
            <li><a href="#">Nav 6</a></li>
            <li><a href="#">Nav 7</a></li>
        </ul>
    </div>
    <div align="center" class="hidden-xs push-to-bottom" style="background-color: red; color: black">Hello!</div>
</div>

工作样本: https://jsfiddle.net/545cdqb2/8/