位置在100％宽度的表格单元内的底部div
问题描述：
我有一个容器div与display: table和三个内部的divs有display: table-cell。位置在100％宽度的表格单元内的底部div
两个外部表格单元具有固定宽度，内部表格单元具有width:100%。所以它随着浏览器的大小而变化。
我还有一个页脚div，我试图放置在中间单元格的底部，使用width: 100%。但它扩展了中间表格单元的宽度。
这个问题如何解决？
实施例：https://jsfiddle.net/9opnx9r8/
HTML
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;
}<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>
答
对于绝对定位元素的包含块是最近的定位的祖先。
如果没有定位的祖先，则包含块是视口。
因此，将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>
做你希望它是在底部，或只是在页面底部的中间容器，但在中间 – Keith
我认为，所有你需要做的排列是加上'位置：相对于'.cell2“。 – Mark
你只需要删除位置：绝对的.text类来获得它在底部的中间容器 – Keith