如何使 div 与父级高度相同（显示为表格单元格）答案

【问题标题】：How to make div same height as parent (displayed as table-cell)如何使 div 与父级高度相同（显示为表格单元格）
【发布时间】：2014-05-07 21:28:22
【问题描述】：

我有一个容器 div，其中包含三个子 div（内容不同）——每个子 div 都和最高的一样高。我通过将容器设置为 display:table 并将子 div 设置为 display:table-cell 等来管理这一点。

一切都很好，直到...

我在其中一个子 div 中插入了一个新 div，并尝试将其设置为 height:100% - 这样它就会拉伸到与其父级相同的高度，但这不起作用。

请看我的 JSFiddle：http://jsfiddle.net/bkG5A/

任何帮助将不胜感激！

HTML

<div class="container">
    <div class="child">
        a<br />a<br />a
    </div>
    <div class="child">
        a<br />a<br />a<br />a<br />a<br />a<br />a
    </div>
    <div class="child">
        <div class="content">
            a<br />a<br />a
        </div>
    </div>
</div>

CSS

.container {
    display: table;
}
.child {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}
.content {
    height: 100%;
    background-color: blue;
}

【问题讨论】：

标签： css html multiple-columns

【解决方案1】：

另一种选择是将您的子 div 设置为 display: inline-block;

.content {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: blue;
}

.container {
  display: table;
}
.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
}
.content {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="child">
    a
    <br />a
    <br />a
  </div>
  <div class="child">
    a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
  </div>
  <div class="child">
    <div class="content">
      a
      <br />a
      <br />a
    </div>
  </div>
</div>

JSFiddle Demo

【讨论】：

有趣的是，这在 IE 10 和 FF 28 中不起作用（甚至我的解决方案在 IE 10 和 FF 中也不起作用），根本无法理解这 2 个浏览器。
我有同样的问题。显示表格不适用于所有浏览器。

【解决方案2】：

您必须为父母（容器和孩子）明确设置height，这是另一种解决方法（如果您不想明确设置该高度）：

.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
  position:relative;
}

.content {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background-color: blue;
}

Fiddle

【讨论】：

另外，我认为使用绝对定位来解决这个问题是个坏主意。
@Chris 不明白为什么它对你不起作用，我当然已经测试过了。而且一点也不坏，你可能根本不明白绝对定位是怎么工作的
您说得对，代码运行良好 - 由于 Firefox 中有一些糟糕的缓存，因此对我不起作用。但我仍然不相信绝对定位是一个好的解决方案。原因如下：jsfiddle.net/bkG5A/5 - 为 div 添加了填充。
@Chris 看起来绝对定位不太好在这种情况下我们必须处理table-cell 布局，我认为这很复杂。您实际上拥有的解决方案在 FireFox 28 和 IE 10 中不起作用（不确定您拥有哪些版本，但这些版本是最新版本）。唯一的解决方案是我们为container 和child 显式设置height（正如我在答案中提到的那样），它适用于Chrome、Opera 和FireFox，但不适用于IE 10（太奇怪了），这个问题虽然看起来很简单，但跨浏览器却很难解决。
是的，你完全正确。我同意这是一个非常简单的任务，但在 css 中很难解决。我想这毕竟必须在 JS 中解决？就像 jQuery.equalHeights 插件一样。

【解决方案3】：

你可以使用这个 CSS：

.content {
    height: 100%;
    display: inline-table;
    background-color: blue;
}

JSFiddle

【讨论】：

效果很好 :) 但我更喜欢 reinders 解决方案，因为 div 已经在一个表中 - 然后它可能不是使它成为表中的表的最佳解决方案。

【解决方案4】：

如果父级已经设置了一个高度，那么子级只能获取一个高度。看到这个例子：Vertical Scrolling 100% height

 html, body {
        height: 100%;
        margin: 0;
    }
    .header{
        height: 10%;
        background-color: #a8d6fe;
    }
    .middle {
        background-color: #eba5a3;
        min-height: 80%;
    }
    .footer {
        height: 10%;
        background-color: #faf2cc;
    }

    $(function() {
      $('a[href*="#nav-"]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 500);
            return false;
          }
        }
      });
    });

html,
body {
  height: 100%;
  margin: 0;
}
.header {
  height: 100%;
  background-color: #a8d6fe;
}
.middle {
  background-color: #eba5a3;
  min-height: 100%;
}
.footer {
  height: 100%;
  background-color: #faf2cc;
}
nav {
  position: fixed;
  top: 10px;
  left: 0px;
}
nav li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <nav>
    <ul>
      <li>
        <a href="#nav-a">got to a</a>
      </li>
      <li>
        <a href="#nav-b">got to b</a>
      </li>
      <li>
        <a href="#nav-c">got to c</a>
      </li>
    </ul>
  </nav>
  <div class="header" id="nav-a">

  </div>
  <div class="middle" id="nav-b">

  </div>
  <div class="footer" id="nav-c">

  </div>

【讨论】：