Bootstrap - 填充剩余的垂直空间[重复]

Question

我正在尝试使用引导程序设计此布局。我放了徽标和导航栏，但现在我必须插入剩余的 div。
我需要将此 div（带有问号）扩展到页面的剩余空间（带有如图所示的边距）。
我不知道徽标或导航栏百分比高度。

---

编辑：发布我的代码（Yii 框架的源页面）

 <a href="index.html"><img width="150" src="images/logo.png"/></a>
 <nav class="navbar navbar-default">
 <div class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw0" id="yw1" name="yt0" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button></div>
        <div class="collapse navbar-collapse" id="yii_booster_collapse_yw0">
            <ul id="yw2" class="nav navbar-nav">
                <li class="active">
                    <a href="index.php/site/home">Home</a>
                </li>
            </ul>
            <ul class="pull-right nav navbar-nav" id="yw3">
                <li>
                    <a href="index.php/user/profile/edit">Profile</a>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span>
                    </a>
                    <ul id="yw4" class="dropdown-menu">
                        <li>
                            <a tabindex="-1" href="index.php/site/contact">Contact Us</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
   </div>
 </nav>
 <div id="content">
     fill vertical space
 </div>

我需要填充剩余空间，而不是徽标/品牌问题。

Answer 1

您将在 css 中看到我在 heightvalue 中使用 calc() 进行减法。

首先使用100vh 获取设备屏幕尺寸的视口高度，然后减去您要填充的 div 上方使用的高度以占据屏幕的其余部分。

这里是 Fiddle。

这有帮助吗？

PS：我在你的导航代码中评论了你有一个额外的div并且我添加了一个</li>。

.block {
  height: -webkit-calc(100vh - 72px);
  height: -moz-calc(100vh - 72px);
  height: calc(100vh - 72px);
  background-color: rgba(90,90,190,0.8);
}