Bootstrap - 填充剩余的垂直空间

Question

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

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

 <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中看到我在height值中使用 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);
}