Bootstrap - 填充剩餘的垂直空間

我試圖用bootstrap來設計這個佈局。我把徽標和導航欄，但現在我不得不插入剩餘的股利。
我需要將這個div（帶問號）擴展到頁面的剩餘空間（帶有圖片的邊距）。
我不知道徽標或導航欄百分比高度。Bootstrap - 填充剩餘的垂直空間

enter image description here

編輯：後我的代碼（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>

我需要填寫剩餘的空間，沒有標誌/品牌問題。

來源

2015-06-19 enfix

如果您想要答案，請發佈您的代碼。 –

你可以用div封裝並設置高度100％（還有更多，這是快速的答案），或者你可以嘗試flexbox，它有一些內置的東西可以做到這一點非常整齊。 – ajmajmajma

如果我使用高度：100％我有滾動條，我不想要這個（如果內容不需要） – enfix

您會在css中看到我使用calc（）中的height值進行減法。

首先使用100vh獲取設備屏幕尺寸的視口高度，然後減去要填充的div上方的高度，以佔據屏幕的其餘部分。

這裏是Fiddle。

這是否幫助？

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

來源

2015-06-20 02:20:52 AngularJR

如果你不知道頂部元素的高度（即它是根據其內容動態計算的）？ – kgreenek

您好，您可能需要嘗試使用一些JS代碼來動態計算並將其輸入到計算中。 – AngularJR

Bootstrap - 填充剩餘的垂直空間

回答

相關問題