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

Question

我有一个自举面板，其高度是从jquery脚本自动生成的。

所以，我想让整个部分的页脚具有背景。

我如何实现这一目标？ 我不想修改此部分的高度，是否可以制作类似于：＆＃34;面板中剩余空间的高度＆＃34;。

这里的小提琴： 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>