100％幅のテーブルセルの内側にあるフッタdiv div

Question

私はコンテナdivにdisplay: table、そして3つの内側divにdisplay: table-cellを持っています。

2つの外側テーブルセルは固定幅を持ち、内側テーブルセルは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>