嵌套面板的高度

Question

我也有類似的情況：http://jsfiddle.net/gP5Dg/

<div class="col-md-8 col-md-offset-2"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel title</h3> 

     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 0, 0</div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 0</div> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 1</div> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 2</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

（您可能需要展開HTML子窗口，明白我的意思）

我想對於面板0,0佔據容納面板的整個高度。我怎樣才能做到這一點？我對css很陌生，並試圖將各個部分的最小高度設置爲100％，但這並不奏效。

這些內部面板的內容可能會有所不同。如果我可以控制列中每個面板可以佔用的總數的百分比，這將非常有用。我認爲如果沒有某種JavaScript，我無法做到這一點？

Answer 1

您可以使用JavaScript來重新定義面板的高度尺寸，你需要定義元素的ID：

<div class="col-md-8 col-md-offset-2"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel title</h3> 

     </div> 
     <div class="row" id="panel_parent"> 
      <div class="col-md-6"> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body" id="panel00">Panel 0, 0</div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 0</div> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 1</div> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 2</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

，然後當文檔準備好您分配panel00的高度與

$(document).ready(function(){ 
    $('#panel00').height($('#panel_parent').height()); 
}); 

您還可以使用大小的百分比，由值乘以它，在這種情況下，你有0.5

乘以50％：面板母公司的價值

Answer 2

沒有任何javascript。

首先您必須設置父高度。那麼你可以設置面板高度。 對於你應該設定爲100％減去margin和padding（10px的）面板高度

參見：http://jsfiddle.net/Kmhtt/

CSS：

.parentHeight 
{ 
    height: 500px; !important; 
} 

.fullHeight 
{ 
    height: calc(100% - 10px); !important; 
} 

HTML：

<div class="col-md-8 col-md-offset-2 parentHeight"> 
    <div class="panel panel-default fullHeight"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel title</h3> 

     </div> 
     <div class="row fullHeight"> 
      <div class="col-md-6 fullHeight"> 
       <div class="panel-body fullHeight"> 
        <div class="panel panel-default fullHeight"> 
         <div class="panel-body ">Panel 0, 0</div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 0</div> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 1</div> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel panel-default"> 
         <div class="panel-body">Panel 1, 2</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>