height: 100% for <div> inside <div> with display: table-cell

http://stackoverflow.com/questions/22220698/height-100-for-div-inside-div-with-display-table-cell

by Felipe Alfaro

HTML

<div class="pm-poster">

  <div>
    
      <div class="table">
      <div class="cell">
          <div class="container">Text</div>
      </div>
  </div>
    
  </div>


  
  
  
  
  
    <img class="pm-poster-image" src="https://i.kinja-img.com/gawker-media/image/upload/s--4LHBt0O4--/c_scale,f_auto,fl_progressive,q_80,w_800/kaprfadz9rnvypesa2u9.png" alt="anime">

</div>

CSS

html, body {
  height: 100%;
}

.pm-poster {
  height: auto;
  background: red;
  position: relative;
}

.table {
    display: table;
    height:100%;
    position: absolute;
    width: 100%;
}

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

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}