全高排，引導和SB-管理

Question

我使用基於引導的SB-管理主題： https://github.com/BlackrockDigital/startbootstrap-sb-admin-2

我試圖創建一個完整的高度行，但不能弄明白。

在body標籤，我的HTML看起來像這樣：

<div id="wrapper" class="container"> 
 

 
    <!-- Navigation --> 
 
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> 
 
    </nav> 
 

 
    <div id="page-wrapper"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
     <h1 class="page-header">Dashboard</h1> 
 
     </div> 
 

 
     <!-- /.col-lg-12 --> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-8"> 
 
     <div class="page-body" style="background: green; height: 100%">Body</div> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
     <div class="page-toolbar" style="background: blue; height: 100%">Toolbar</div> 
 
     </div> 
 

 
     <!-- /.col-lg-12 --> 
 
    </div> 
 

 

 

 

 
    </div> 
 
    <!-- /#page-wrapper --> 
 

 
</div> 
 
<!-- /#wrapper -->

我設置頁面體和頁面的工具欄是100％的高度，但他們沒有擴大。我假設他們是他們的父母的100％。問題是我需要設置什麼來讓這些填充頁面。

Answer 1

如果你想的div視口的全高度，你可以給

height: 100vh; 

它。這意味着100％的視口高度。

以類似的方式

width: 100vw; 

可用於視口寬度。如果你想要具體說明高度。例如，如果你有一個960x75像素高度導航欄，並要覆蓋remanining區域股利你可以使用CSS calc方法，只是給它

height: calc(100vh - 75px);