在表格单元格中使用CSS使内部div高度为100％

Question

我有一个表格/表格行/表格单元格布局，并且我希望内部div高度对齐。 我看到了这篇文章： 高度：<div>中<div>内的<div>为100％，显示为：table-cell ，它询问相同的问题，但是我的代码似乎无法获得相同的结果。

我有一个JS解决方案，但确实希望不需要它。

我的问题是 ：如何仅使用CSS使nkda框与其他两个框的高度相同？

这是一个JS小提琴http://jsfiddle.net/a1opo1kd/

HTML

<div class="forum-tag-summaries">

  <dl class="tags-rows">
    <div class="row tags-row">
      <div id="tag-wrapper-2" class="tag-wrapper" data-row="0" data-ftg_id="2" data-i="0">
        <div class="alert alert-info" id="ui-id-1">
          <dt>
            <div class="fl" title="Created 1 year ago by Mr Peter GEE">
              clinical
            </div>
            <button class="btn btn-xs btn-edit ml-5">
              <span class="fa fa-pencil">
              </span>
            </button>
            <div class="fr text-muted">
              x&nbsp;2
            </div>
          </dt>
          <br>
          <dd>
            <div class="text-muted view" title="">
              Clinical questions relating to medication reviews.
            </div>
            <div class="edit hidden text-muted">
              <textarea data-id="2" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
                Clinical questions relating to medication reviews.
              </textarea>
            </div>
          </dd>
      </div>
  </div>
  <div id="tag-wrapper-6" class="tag-wrapper active" data-row="0" data-ftg_id="6" data-i="1">
    <div class="alert alert-info" id="ui-id-2">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr Peter GEE">
          nkda
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          no known drug allergies
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="6" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
            no known drug allergies
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  <div id="tag-wrapper-3" class="tag-wrapper" data-row="0" data-ftg_id="3" data-i="2">
    <div class="alert alert-warning" id="ui-id-3">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr user 1">
          RMMR
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="3" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  </div>
  <div class="row tags-row">
    <div id="tag-wrapper-4" class="tag-wrapper" data-row="1" data-ftg_id="4" data-i="0">
      <div class="alert alert-warning" id="ui-id-4">
        <dt>
          <div class="fl" title="Created 2 days ago by Mr user 1">
            hypertension
          </div>
          <button class="btn btn-xs btn-edit ml-5">
            <span class="fa fa-pencil">
            </span>
          </button>
          <div class="fr text-muted">
            x&nbsp;1
          </div>
        </dt>
        <br>
        <dd>
          <div class="text-muted view" title="">
            <span class="text-danger">
              This tag does not have a description, please enter one!
            </span>
          </div>
          <div class="edit hidden text-muted">
            <textarea data-id="4" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
            </textarea>
          </div>
        </dd>
      </div>
  </div>
  <div id="tag-wrapper-5" class="tag-wrapper" data-row="1" data-ftg_id="5" data-i="1">
    <div class="alert alert-warning" id="ui-id-5">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr user 1">
          poly pharmacy
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="5" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  <div id="tag-wrapper-7" class="tag-wrapper" data-row="1" data-ftg_id="7" data-i="2">
    <div class="alert alert-danger" id="ui-id-6">
      <dt>
        <div class="fl" title="Created 23 hours ago by user 1">
          test
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;0
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="7" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  </div>
  </dl>
</div>

CSS

    .btn-edit{background-color:transparent;}
  dl.tags-rows {
  display: table;
  height: auto;
  }
  dl.tags-rows .tags-row {display: table-row;}
  dl.tags-rows .tags-row .tag-wrapper {
      display: table-cell;
      height: 100%;
      width: 33%;
      min-width: 33%;
      padding: 5px;}
  .ml-5{margin-left:5px;}
  .fl{float:left;}
  .fr{float:right;}

屏幕截图示例

Answer 1

非常简单 在您的情况下，这就是您所需要的：

dl.tags-rows {
    display: table;
    height: 1px; /* IE fix, any small height */
}

.alert {
    display: inline-table;
    height: 100%;
    width: 100%;
    vertical-align: top;
}

演示： http ： //jsfiddle.net/a1opo1kd/5/

Answer 2

使用CSS唯一可以做的是：

1. 为三个<div>一个容器
2. 将高度设置为最大<div>的高度
3. 将容器的位置设置为“相对”。
4. 将<div>的高度设置为100％。

我希望这有帮助！