height 100 for div inside div with display table-cell

Question

Here is 2 column markup using display  table and display  table-cell CSS declarations    x000D   x000D   table   x000D    display  table  x000D    x000D   x000D   cell   x000D    border  2px solid black  x000D    vertical-align  top  x000D    display  table-cell  x000D    x000D   x000D   container   x000D    height  100   x000D    border  2px solid green  x000D    x000D   lt div class  table  gt  x000D     lt div class  cell  gt  x000D       lt p gt Text x000D         lt p gt Text x000D           lt p gt Text x000D             lt p gt Text x000D               lt p gt Text x000D                 lt p gt Text x000D                   lt p gt Text x000D                     lt p gt Text x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  container  gt Text lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    But  container block does not fill parent cell vertically  Here is an example on JsFiddle  http   jsfiddle net MGRdP 2   What I have   What I need     Please  do not propose JS solution

User · Accepted Answer

When you use   for setting heights or widths  always set the widths heights of parent elements as well    x000D   x000D   table   x000D      display  table  x000D      height  100   x000D    x000D   x000D   cell   x000D      border  2px solid black  x000D      vertical-align  top  x000D      display  table-cell  x000D      height  100   x000D    x000D   x000D   container   x000D      height  100   x000D      border  2px solid green  x000D      -moz-box-sizing  border-box  x000D    x000D   lt div class  table  gt  x000D       lt div class  cell  gt  x000D           lt p gt Text x000D           lt p gt Text x000D           lt p gt Text x000D           lt p gt Text x000D           lt p gt Text x000D           lt p gt Text x000D           lt p gt Text x000D           lt p gt Text x000D       lt  div gt  x000D       lt div class  cell  gt  x000D           lt div class  container  gt Text lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

table     height 1px     table  gt  td     height 100      table  gt  td  gt   inner     height 100       Confirmed working on    Chrome 60 0 3112 113  63 0 3239 84  Firefox 55 0 3  57 0 1 Internet Explorer 11

User · Answer

Define your  table and  cell height 100         table           display  table          height 100               cell           border  1px solid black          display  table-cell          vertical-align top  height  100                container           height  100           border  10px solid green           Demo

User · Answer

set height  100   and overflow auto  for div inside  cell

User · Answer

In Addition to jsFiddle  I can offer an ugly hack if you wish in order to make it cross-browser  IE11  Chrome  Firefox    Instead of height 100    put height 1em  on the  cell

User · Answer

Make the the table-cell position relative  then make the inner div position absolute  with top right bottom left all set to 0px    table-cell     display  table-cell    position  relative      inner-div     position  absolute    top  0px    right  0px    bottom  0px    left  0px

User · Answer

This is exactly what you want   HTML   lt div class  table  gt        lt div class  cell  gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt           lt p gt Text lt  p gt       lt  div gt       lt div class  cell  gt           lt div class  container  gt Text lt  div gt       lt  div gt   lt  div gt    CSS   table       display  table      height auto      cell       border  2px solid black       display table-cell      vertical-align top      container       height  100       overflow auto      border  2px solid green      -moz-box-sizing  border-box

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

Examples related to html

Examples related to css

Examples related to css-tables