twitter-bootstrap Bootstrap - 填充剩余的垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30948667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - fill remaining vertical space
提问by enfix
I'm trying to design this layout using bootstrap. I put logo and navbar but now I have to insert the remaining div.
I need to extend this div (with the question mark) to the remaining space of the page (with margin like the picture).
I don't know logo or navbar percentage height.
我正在尝试使用引导程序设计此布局。我放了徽标和导航栏，但现在我必须插入剩余的 div。
我需要将这个 div（带问号）扩展到页面的剩余空间（像图片一样有边距）。
我不知道徽标或导航栏百分比高度。
Edit:Post my code (source page of Yii Framework)
编辑：发布我的代码（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>
I need to fill remaining space, not logo/brand problem.
我需要填充剩余空间，而不是徽标/品牌问题。
采纳答案by AngularJR
You will see in the css that I used calc()in the heightvalue to do a subtraction.
您将在 css 中看到我在值中使用calc()进行height减法运算。
First get the viewport height of the device screen size by using 100vhthen subtract the height that is used above the div that you want to fill to take up the rest of the screen.
首先通过使用获取设备屏幕大小的视口高度，100vh然后减去要填充以占据屏幕其余部分的 div 上方使用的高度。
Here is the Fiddle.
这是小提琴。
Does this help?
这有帮助吗？
PS: I commented in your nav code where you have a extra divand where I added a </li>.
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);
}
