Bootstrap - fill remaining vertical space [duplicate]

Question

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.

---

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

Answer 1

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