面板頁腳，整個部分的背景

Question

我有一個引導面板，其中的高度是從jQuery腳本自動生成的。

所以，我希望有一個整個部分的背景的頁腳。

我怎樣才能實現這一目標？ 我不想爲此部分修復高度，是否可以製作如下內容：「面板中其餘空間的高度」。

這裏小提琴： http://www.bootply.com/XBCffrO0My

Answer 1

表的佈局方式

想法是讓元素像一個表和子項作爲其行這將佔據整個空間。

Updated Bootply

#crud1 { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.panel-footer { 
 
    display: table-row; 
 
    height: 100%; 
 
} 
 
.panel-footer .row { 
 
    display: table-cell; 
 
    padding-top: 5px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-4"> 
 
    <div id="crud1" class="panel panel-primary" style="height: 248px;"> 
 

 
    <div class="panel-heading clearfix"> 
 
     <div class="pull-left"> 
 
     ChartLine 1 
 
     </div> 
 
     <div class="pull-right"> 
 
     <span class="label label-success">priusa2</span> 
 

 
     </div> 
 

 
     <div class="pull-right" style="padding-right: 7px;"> 
 

 
     <span class="label label-success status"></span> 
 
     </div> 
 

 
     <p></p> 
 
    </div> 
 
    <!-- panel-heading closed --> 
 
    <div class="panel-body"> 
 
     <div class="container-fluidrm"> 
 
     No-picture 
 
     </div> 
 
    </div> 
 
    <!-- panel-body closed --> 
 
    <div class="panel-footer"> 
 
     <div class="row" style="height: 100%;"> 
 
     <div class="col-md-9"> 
 

 
      <p>Description:</p> 
 

 

 
     </div> 
 

 
     <div class="col-md-1"> 
 
      <a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a> 
 
     </div> 
 

 
     <div class="col-md-1" style="margin-left:7px;"> 
 
      <span id="logos" class="glyphicon glyphicon-star"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- panel-footer closed --> 
 

 

 
    </div> 
 
</div>

---

靈活盒方法

給孩子項目flex: 1與父元素擴大。

Updated Bootply

#crud1 { 
 
    display: flex; /* Activate flexbox module layout */ 
 
    flex-direction: column; /* Align items horizontally */ 
 
} 
 
.panel-footer { 
 
    flex: 1; /* Expand with the parent */ 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-4"> 
 
    <div id="crud1" class="panel panel-primary" style="height: 248px;"> 
 

 
    <div class="panel-heading clearfix"> 
 
     <div class="pull-left"> 
 
     ChartLine 1 
 
     </div> 
 
     <div class="pull-right"> 
 
     <span class="label label-success">priusa2</span> 
 

 
     </div> 
 

 
     <div class="pull-right" style="padding-right: 7px;"> 
 

 
     <span class="label label-success status"></span> 
 
     </div> 
 

 
     <p></p> 
 
    </div> 
 
    <!-- panel-heading closed --> 
 
    <div class="panel-body"> 
 
     <div class="container-fluidrm"> 
 
     No-picture 
 
     </div> 
 
    </div> 
 
    <!-- panel-body closed --> 
 
    <div class="panel-footer"> 
 
     <div class="row" style="height: 100%;"> 
 
     <div class="col-md-9"> 
 

 
      <p>Description:</p> 
 

 

 
     </div> 
 

 
     <div class="col-md-1"> 
 
      <a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a> 
 
     </div> 
 

 
     <div class="col-md-1" style="margin-left:7px;"> 
 
      <span id="logos" class="glyphicon glyphicon-star"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- panel-footer closed --> 
 

 

 
    </div> 
 
</div>