在页格单元格的底部放置页脚div，宽度为100％

Question

我有一个div容器display: table和三个内部div display: table-cell。

两个外部表格单元格具有固定宽度，内部表格单元格具有width:100%。所以它随着浏览器的大小而缩放。

我还有一个页脚div，我试图将width: 100%放在中间单元格的底部。但它扩展了中间表格单元格的宽度。

如何修复此问题？

示例：https://jsfiddle.net/9opnx9r8/

HTML

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}

.cell {
  display: table-cell;
  border: 1px solid red;
}

.cell1,
.cell3 {
  min-width: 150px;
}

.cell2 {
  width: 100%;
}

.text {
  border: 1px solid green;
  position: absolute;
  left: inherit;
  bottom: 0;
  width: 100%;
  height: 70px;
}

＆＃13;

<div style="display:table; min-height: 100%;">
  <div class="cell cell1">
    <h1>C1</h1>
  </div>
  <div class="cell cell2">
    <h1>C2</h1>
    <ul>
      <li>List</li>
      <li>must</li>
      <li>stay</li>
      <li>top</li>
    </ul>
    <div class="text">FOOTER TEXT HERE</div>
  </div>
  <div class="cell cell3">
    <h1>C3</h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

绝对定位元素的包含块是最近的祖先。

如果没有定位的祖先，则包含的块是视口。

因此，将position: relative添加到应该是页脚包含块的元素。

html,body {
  height: 100%;
}

.cell {
  display: table-cell;
  border: 1px solid red;
}

.cell1, .cell3 {
  min-width: 150px;
}

.cell2 {
  width: 100%;
  position: relative; /* NEW */
}

.text {
  border: 1px solid green;
  position: absolute;
  left: inherit;
  bottom:0;
  width: 100%;
  height: 70px;
}

<div style="display:table; min-height: 100%;">
    <div class="cell cell1">
      <h1>C1</h1>
    </div>
    <div class="cell cell2">
      <h1>C2</h1>
      <ul>
        <li>List</li>
        <li>must</li>
        <li>stay</li>
        <li>top</li>
      </ul>
      <div class="text">FOOTER TEXT HERE</div>
    </div>
    <div class="cell cell3">
      <h1>C3</h1>
    </div>
</div>