Html height: 100% for <div> inside <div> with display: table-cell

height: 100% for <div> inside <div> with display: table-cell

提问by Paul Annekov

Here is 2 column markup using display: tableand display: table-cellCSS declarations:

这是使用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>

But .containerblock does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2.

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

What I have| What I need

我有什么| 我需要的

Please, do not propose JS solution.

请不要提出JS解决方案。

采纳答案by anurupr

When you use %for setting heights or widths, always set the widths/heights of parent elements as well:

当您%用于设置高度或宽度时，请始终同时设置父元素的宽度/高度：

.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>

回答by Danila Alpatov

table{
   height:1px;
}

table > td{
   height:100%;
}

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

Confirmed working on:

确认工作：

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

• 铬 60.0.3112.113、63.0.3239.84
• 火狐 55.0.3、57.0.1
• 浏览器 11

回答by hd.deman

set height: 100%;and overflow:auto;for div inside .cell

setheight: 100%;和overflow:auto;for div 里面.cell

回答by Saar

In Addition to jsFiddle, I can offer an ugly hack if you wish in order to make it cross-browser (IE11, Chrome, Firefox).

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

Instead of height:100%;, put height:1em;on the .cell.

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

回答by Abdalla Mahmoud

Make the the table-cell position relative, then make the inner div position absolute, with top/right/bottom/left all set to 0px.

使表格单元格位置相对，然后使内部 div 位置绝对，上/右/下/左都设置为 0px。

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

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

回答by Ernest Sawyer

This is exactly what you want:

这正是您想要的：

HTML

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

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

回答by Rohit Azad

Define your .tableand .cellheight:100%;

定义你的.table和.cellheight: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

演示