Bootstrap Responsive Layout無法使用Calc CSS功能

Question

我正在使用引導框架構建一個帶有HTML & CSS的網頁。它基於網格佈局系統。我想讓我的導航欄和我的網格的第一行在一個組中，第二行在一個組中，其中每個組填充屏幕高度的100％。我看不到div定義是如何工作的，因爲它跨越了兩個div類的中間。我試過這個，使用calc函數，但它似乎沒有工作。

Here是一個JSFiddle。 （注：儘量擴大輸出窗口，以顯示正確的問題）

<div class="PageView"> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid" id="logoStripe"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="defaultNavbar1"> 
       <ul class="nav navbar-nav links"> 
        <li><a href="#">About<span class="sr-only">(current)</span></a> 
        </li> 
        <li><a href="#">Pre-Order</a> 
        </li> 
        <img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;"> 
        <li><a href="#">News</a> 
        </li> 
        <li><a href="#">Contact Us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container-fluid --> 
    </nav> 
    <div class="container-fluid"> 
     <div class="PageView"> 
      <div class="row"> 
       <div class="col-md-12">.col-md-1</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6">Button 1 (align Right)</div> 
       <div class="col-md-6">Button 2 (align Left)</div> 
      </div> 
     </div> 
</div> 

和CSS：

.links { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    font-size: 28px; 
    color: #FFFFFF; 
} 
#logoStripe { 
    background-color: #54534a; 
} 
.PageView { 
    height: calc(100% - 75px); 
} 

任何人都可以看到我做了什麼錯？任何想法將不勝感激。

Answer 1

百分比高度是從父母高度計算出來的，所以你必須從大多數父母元素開始，然後將其降到你想要的修改後高度的元素。你也有兩個div與.PageView不能使用相同的CSS正常工作;我不確定這是否有意完成。

此外，如果您使用的是calc，則需要調整每個Bootstrap斷點的像素量。

html, body, .PageView { 
 
    height:100%; 
 
} 
 

 
.links { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    font-size: 28px; 
 
    color: #FFFFFF; 
 
} 
 
#logoStripe { 
 
    background-color: #54534a; 
 
} 
 
.adjustedHeight { 
 
    height: calc(100% - 77px); 
 
    background-color:red; /* For emphasis */ 
 
} 
 
.PageView .navbar { 
 
    margin:0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="PageView"> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid" id="logoStripe"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="defaultNavbar1"> 
 
       <ul class="nav navbar-nav links"> 
 
        <li><a href="#">About<span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li><a href="#">Pre-Order</a> 
 
        </li> 
 
        <img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;"> 
 
        <li><a href="#">News</a> 
 
        </li> 
 
        <li><a href="#">Contact Us</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav> 
 
    <div class="container-fluid adjustedHeight"> 
 
     <div class="PageView2"> 
 
      <div class="row"> 
 
       <div class="col-md-12">.col-md-1</div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-md-6">Button 1 (align Right)</div> 
 
       <div class="col-md-6">Button 2 (align Left)</div> 
 
      </div> 
 
     </div> 
 
</div>