enfix enfix - 1 year ago 173
CSS Question

Bootstrap - fill remaining vertical space

I'm trying to design this layout using bootstrap. I put logo and navbar but but now I have to insert the remaining div.

I need to extend this div (with question mark) to the remaining space of the page (with margin like the picture).

I don't know logo or navbar percentage height.

enter image description here

EDIT: POST MY CODE (source page of 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>
<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>
<ul class="pull-right nav navbar-nav" id="yw3">
<a href="index.php/user/profile/edit">Profile</a>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span>
<ul id="yw4" class="dropdown-menu">
<a tabindex="-1" href="index.php/site/contact">Contact Us</a>
<a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a>
<div id="content">
fill vertical space

I need to fill remaining space, not logo/brand problem.

Answer Source

You will see in the css that I used calc() in the heightvalue to do a subtraction.

First get the viewport height of the device screen size by using 100vh then subtract the height that is used above the div that you want to fill to take up the rest of the screen.

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>.

.block {
  height: -webkit-calc(100vh - 72px);
  height: -moz-calc(100vh - 72px);
  height: calc(100vh - 72px);
  background-color: rgba(90,90,190,0.8);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download