位置在100％寬度的表格單元內的底部div

Question

我有一個容器div與display: table和三個內部的divs有display: table-cell。

兩個外部表格單元具有固定寬度，內部表格單元具有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>

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>