Bootstrap - 填充剩余的垂直空间

Question

我正在尝试使用bootstrap设计此布局.我把徽标和导航栏,但现在我必须插入剩余的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中看到我在值中使用了calc()height来进行减法.

首先获取设备屏幕大小的视口高度,100vh然后使用减去要填充的div上方使用的高度来占用屏幕的其余部分.

这是小提琴.

这有帮助吗？

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);
}