Position pied de bas div à l'intérieur de la table-cellule avec 100% de largeur

Question

J'ai un conteneur div avec display: table et trois divs intérieurs qui ont display: table-cell.

Les deux cellules de table externes ont une largeur fixe, la cellule de table interne a width:100%. Donc, il évolue avec la taille du navigateur.

J'ai également un div de pied de page que j'essaye de placer au fond de la cellule du milieu, avec un width: 100%. Mais il s'étend bien au-delà de la largeur de la table du milieu.

Comment ce problème peut être résolu?

Exemple: 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

Le bloc contenant des éléments en position absolue est l'ancêtre positionné le plus proche.

S'il n'existe aucun ancêtre positionné, le bloc conteneur est la fenêtre.

Par conséquent, ajoutez position: relative à l'élément qui doit être le bloc conteneur pour le pied de page.

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>