Как установить табличную ячейку всегда в нижней части экрана: таблица?

Question

Я пытаюсь расположить табличную ячейку всегда на дне в пределах display:table,
, но без успеха.

Возможно, кто-то может показать мне, что не так с моим CSS.

codepen

HTML

<div class="table"> 
    <div class="cell"> 
    <div class="top">Top</div> 
    <div class="middle">Text in the<br>middle cell<br>with a variable <br>number of rows</div> 
    <div class="bottom">Button always at the bottom</div> 
    </div> 
    <div class="cell"> 
    <div class="top">Top</div> 
    <div class="middle">Middle</div> 
    <div class="bottom">Button always at the bottom</div> 
    </div> 
</div> 

CSS

.table { 
    background-color:#BBB; 
    border-collapse:separate; 
    border-spacing:10px; 
    display:table; 
    width:500px; 
} 
.cell { 
    background-color:#EEE; 
    display:table-cell; 
    padding:5px; 
    width:200px; 
} 
.top { 
    height:20px; 
} 
.middle { 
    min-height:60px; 
    padding:15px; 
} 
.bottom { 
    min-height:30px; 
    vertical-align:bottom; 
} 

Answer 1

Если вы можете позволить себе, чтобы дать вашему .bottom фиксированную высоту, потенциально можно абсолютно позиционировать их в контейнере, а затем дать .middle некоторые соответствующие margin или padding?

Answer 2

Все, что вам нужно сделать, это добавить положение: относительное; к классу «клетки», а положение: абсолютное; внизу: 5px; до "нижнего" класса. Кнопка будет абсолютной позицией в вашем «ячейке» div, которая относительна к браузеру.

https://codepen.io/DannaB67/pen/NvxELm?editors=1100

HTML

<div class="table"> 
    <div class="cell"> 
    <div class="top">Top</div> 
    <div class="middle"> 
     Text in the<br>middle cell<br>with a variable <br>number of rows</div> 
    <div class="bottom">Button always at the bottom</div> 
    </div> 
    <div class="cell"> 
    <div class="top">Top</div> 
    <div class="middle">Middle</div> 
    <div class="bottom">Button always at the bottom</div> 
    </div> 
</div> 

CSS

.table { 
    background-color:#BBB; 
    border-collapse:separate; 
    border-spacing:10px; 
    display:table; 
    width:500px; 
} 
.cell { 
    background-color:#EEE; 
    display:table-cell; 
    position:relative; 
    padding:5px; 
    width:200px; 
} 
.top { 
    height:20px; 
} 
.middle { 
    min-height:100px; 
    padding:15px; 
} 
.bottom { 
    min-height:30px; 
    position:absolute; 
    bottom:0px; 
    right:5px; 
}