Bootstrap - điền vào không gian dọc còn lại

Question

Tôi đang cố gắng thiết kế bố cục này bằng cách sử dụng bootstrap. Tôi đặt logo và navbar nhưng bây giờ tôi phải chèn div còn lại.
Tôi cần mở rộng div này (với dấu hỏi) đến khoảng trống còn lại của trang (có lề như hình ảnh).
Tôi không biết chiều cao phần trăm biểu trưng hoặc thanh điều hướng.

---

Edit: bài viết mã của tôi (trang nguồn Yii Khung)

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

tôi cần phải lấp đầy không gian còn lại, chứ không phải biểu tượng/vấn đề thương hiệu.

Answer 1

Bạn sẽ thấy trong css mà tôi đã sử dụng calc() trong giá trị height để thực hiện phép trừ.

Đầu tiên có chiều cao khung nhìn của kích thước màn hình thiết bị bằng cách sử dụng 100vh sau đó trừ chiều cao được sử dụng phía trên div mà bạn muốn lấp đầy để chiếm phần còn lại của màn hình.

Đây là Fiddle.

Điều này có hữu ích không?

PS: Tôi đã nhận xét trong mã nav nơi bạn có thêm div và nơi tôi đã thêm </li>.

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