Comment puis-je obtenir un pied de page collant à l'intérieur d'un div avec une cellule de table?

Question

J'ai construit une simple disposition de 2 colonnes qui ressemble à l'exemple suivant et maintenant je veux un pied de page collant dans la colonne de droite de ma mise en page.

<div class="table"> 
    <div class="cell"> 
     <!-- some other stuff --> 
    </div> 
    <div class="cell"> 
     <header class="row">Header</header> 
     <main class="row expanded">Main</main> 
     <footer class="row">Footer</footer> 
    </div> 
</div> 

définitions de classe:

.table { 
    display: table; 
    height:100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
} 

.cell { 
    border: 2px solid black; 
    vertical-align: top; 
    display: table-cell; 
    height:100%; 
} 

.row { 
    display: table-row; 
} 

.expanded { 
    height: 100%; 
} 

Voir violon: https://jsfiddle.net/k1zjjwze/

Comme vous pouvez le voir, j'utilisé display: table-cellule pour obtenir une pleine hauteur 2 mise en page de colonne (je sais que je pouvez utiliser flexbox pour cela, aussi - mais pas encore). Maintenant, je veux un pied de page collant dans la colonne de droite de ma mise en page, donc j'ai mis l'en-tête, le conteneur principal et pied de page à afficher: table-ligne et élargi le conteneur principal à hauteur: 100%, mais quelqu'un ne peut pas Dites-moi comment je peux réaliser ce que je veux?

Answer 1

J'ai été capable d'accomplir cela en donnant à la seconde cellule un positionnement relatif. Une fois cela fait, vous pouvez donner à la cellule de pied de page un positionnement absolu, et régler son fond à 0px. Clause de non-responsabilité: Je suis pratiquement certain qu'il existe une meilleure façon de procéder.

HTML pour la deuxième cellule

<div class="cell rel"> 
    <header class="row">Header</header> 
    <main class="row expanded">Main</main> 
    <footer class="row">Footer</footer> 
</div> 

CSS

.rel{position:relative;} 

footer { 
    border: 1px solid yellow; 
    position:absolute; 
    bottom:0px; 
} 

https://jsfiddle.net/k1zjjwze/2/

Answer 2

Bon sang, je l'ai trouvé une solution, je viens d'ajouter une autre enveloppe de table à la deuxième colonne:

<div class="table"> 
    <div class="cell"> 
     <!-- some other stuff --> 
    </div> 
    <div class="cell"> 
     <div class="table"> 
      <header class="row">Header</header> 
      <main class="row expanded">Main</main> 
      <footer class="row">Footer</footer> 
     </div> 
    </div> 
</div> 

Voir violon Mise à jour: https://jsfiddle.net/k1zjjwze/1/