高度:<div>内的<div>为100%,显示:table-cell

Question

这是使用display: table和display: table-cellCSS声明的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解决方案.

Answer 1

当您%用于设置高度或宽度时,也始终设置父元素的宽度/高度

尝试更新的小提琴

http://jsfiddle.net/MGRdP/6/

Answer 2

设置height: 100%;和overflow:auto;div里面.cell

Answer 3

table{
   height:1px;
}

table > td{
   height:100%;
}

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

确认工作:

• Chrome 60.0.3112.113,63.0.3239.84
• Firefox 55.0.3,57.0.1
• Internet Explorer 11

Answer 4

除了jsFiddle之外,如果你愿意为了使它成为跨浏览器(IE11,Chrome,Firefox),我可以提供一个丑陋的黑客.

相反的height:100%;,把height:1em;上.cell.

Answer 5

这正是你想要的:

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;
}

Answer 6

将表格单元格位置设为相对，然后将内部div位置设为绝对，顶部/右侧/底部/左侧均设置为0px。

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

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