Bootstrap - riempire lo spazio verticale rimanente

Question

Sto provando a progettare questo layout utilizzando il bootstrap. Inserisco il logo e la barra di navigazione, ma ora devo inserire il div rimanente.
Ho bisogno di estendere questo div (con il punto interrogativo) allo spazio rimanente della pagina (con margine come l'immagine).
Non conosco l'altezza percentuale del logo o della barra di navigazione.

---

Modifica: Messaggio il mio codice (pagina fonte di 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> 

ho bisogno di riempire lo spazio rimanente, non logo/marchio problema.

Answer 1

Verrà visualizzato nel css che ho utilizzato calc() nel valore height per eseguire una sottrazione.

Prima ottenere l'altezza del viewport delle dimensioni dello schermo del dispositivo utilizzando 100vh quindi sottrarre l'altezza utilizzata sopra il div che si desidera riempire per occupare il resto dello schermo.

Questo è il .

Questo aiuto?

PS: Ho commentato il tuo codice di navigazione dove hai un div extra e dove ho aggiunto un </li>.

.block { 
    height: -webkit-calc(100vh - 72px); 
    height: -moz-calc(100vh - 72px); 
    height: calc(100vh - 72px); 
    background-color: rgba(90,90,190,0.8); 
}