<div> 内 <div> 的高度：100% 显示：table-cell答案

【问题标题】：height: 100% for <div> inside <div> with display: table-cell<div> 内 <div> 的高度：100% 显示：table-cell
【发布时间】：2014-04-08 20:46:08
【问题描述】：

这是使用 display: table 和 display: table-cell CSS 声明的 2 列标记：

.table {
  display: table;
}

.cell {
  border: 2px solid black;
  vertical-align: top;
  display: table-cell;
}

.container {
  height: 100%;
  border: 2px solid green;
}

<div class="table">
  <div class="cell">
    <p>Text
      <p>Text
        <p>Text
          <p>Text
            <p>Text
              <p>Text
                <p>Text
                  <p>Text
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>

但.container 块不会垂直填充父单元格。这是 JsFiddle 上的一个示例：http://jsfiddle.net/MGRdP/2。

我有什么 | 我需要什么

请不要提出JS方案。

【问题讨论】：

问题是你使用height: 100%;作为父元素height设置为auto的子元素，所以为了解决这个问题，将height: 100%;分配给所有的父元素，如果不是，而是使用一些固定的height 来代替.cell
+1 表示没有 JS 解决方案。

标签： html css css-tables

【解决方案1】：

定义您的 .table 和 .cell height:100%;

    .table {
        display: table;
        height:100%;
    }

    .cell {
        border: 1px solid black;
        display: table-cell;
        vertical-align:top;
height: 100%;

    }

    .container {
        height: 100%;
        border: 10px solid green;

    }

Demo

【讨论】：

这些解决方案都不适用于 Bootstrap 元素：表格元素是原始元素，单元格元素是 col-lg，容器是面板

【解决方案2】：

当您使用% 设置高度或宽度时，请务必同时设置父元素的宽度/高度：

.table {
    display: table;
    height: 100%;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height: 100%;
}

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

<div class="table">
    <div class="cell">
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

【讨论】：

您应该将-moz-box-sizing: border-box; 添加到.container 以使其在FF 上也能正常工作。
将表格高度更改为 1px，它适用于 IE11。不过，下面没有任何内容。
为什么这在
@Capsule 微软放弃支持并不等于人们停止使用它。
不幸的是，该解决方案在 Chrome 上停止工作

【解决方案3】：

这正是你想要的：

HTML

<div class="table">

    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

CSS

.table {
    display: table;
    height:auto;
}

.cell {
    border: 2px solid black; 
    display:table-cell;
    vertical-align:top;
}

.container {
    height: 100%;
    overflow:auto;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

【讨论】：

-moz-box-sizing: border-box; for .container 在这里 :)
适用于 FF，但不适用于 IE (11)

【解决方案4】：

将height: 100%; 和overflow:auto; 设置为.cell 内的div

【讨论】：

overflow:auto; 是我的关键。谢谢！
但是与overflow: auto一起出现的滚动条呢？

【解决方案5】：

除了 jsFiddle，如果你愿意，我可以提供一个丑陋的 hack 以使其跨浏览器（IE11、Chrome、Firefox）。

将height:1em; 放在.cell 上，而不是height:100%;。

【讨论】：

你能解释一下为什么将 height: 100% 改为 height: 1em;作品？ 1em 应该只是字母“m”的高度 .... 有趣的是，我有一个与上面类似的问题并更改为 height:1em 全面解决了我的问题。赞！注意*我没有做任何其他事情，比如改变位置等......
我不确定它是否丑陋，但它确实有效。希望我知道为什么。

【解决方案6】：

将表格单元格的位置设为相对，然后将内部 div 的位置设为绝对，top/right/bottom/left 都设置为 0px。

.table-cell {
  display: table-cell;
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

【讨论】：

如果您的.inner-div 有边距或内容溢出怎么办？

【解决方案7】：

table{
   height:1px;
}

table > td{
   height:100%;
}

table > td > .inner{
   height:100%;
}

确认工作：

铬 60.0.3112.113、63.0.3239.84
火狐 55.0.3、57.0.1
Internet Explorer 11

【讨论】：

表格{高度：1px; } 是关键
在接受的解决方案停止工作后，这个实际上与新版本的 Chrome 配合得很好。
荒谬，但完美。谢谢！实际上我什至不需要td { 100% }，只需要table 和.inner 样式对我有用。
但是为什么呢？这是错误还是预期行为？在 firefox 68.5 和 chrome 79 上工作起来就像一个魅力。@Scrimothy td { 100% } 仍然是 firefox 需要的。
@KamilBęben 我在 FF 上没有注意到这一点。谢谢