面板页脚，整个部分的背景

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>