嵌套面板的高度

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>