How to make div same height as parent displayed as table-cell

Question

I got a container div containing three child divs  vary in content  - each as tall as the tallest one  I managed this by setting the container to display table and the child divs to display table-cell etc   Everything worked just fine  until     I inserted a new div inside one of the child divs and tried to make it height 100  - so it would stretch to the same height as its parents  but that did not work   Please see my JSFiddle  http   jsfiddle net bkG5A   Any help would be greatly appreciated   HTML    lt div class  container  gt       lt div class  child  gt          a lt br   gt a lt br   gt a      lt  div gt       lt div class  child  gt          a lt br   gt a lt br   gt a lt br   gt a lt br   gt a lt br   gt a lt br   gt a      lt  div gt       lt div class  child  gt           lt div class  content  gt              a lt br   gt a lt br   gt a          lt  div gt       lt  div gt   lt  div gt    CSS    container       display  table     child       width  30px      background-color  red      display  table-cell      vertical-align  top     content       height  100       background-color  blue

User · Answer

You can use this CSS    content       height  100       display  inline-table      background-color  blue      JSFiddle

User · Answer

The child can only take a height if the parent has one already set  See this exaple   Vertical Scrolling 100  height   html  body           height  100           margin  0             header          height  10           background-color   a8d6fe             middle           background-color   eba5a3          min-height  80              footer           height  10           background-color   faf2cc           x000D   x000D        function     x000D           a href    nav-     click function     x000D          if  location pathname replace               this pathname replace             amp  amp  location hostname    this hostname    x000D            var target     this hash   x000D            target   target length   target       name     this hash slice 1          x000D            if  target length    x000D                 html  body   animate   x000D                scrollTop  target offset   top x000D                 500   x000D              return false  x000D              x000D            x000D            x000D          x000D  html  x000D  body   x000D    height  100   x000D    margin  0  x000D    x000D   header   x000D    height  100   x000D    background-color   a8d6fe  x000D    x000D   middle   x000D    background-color   eba5a3  x000D    min-height  100   x000D    x000D   footer   x000D    height  100   x000D    background-color   faf2cc  x000D    x000D  nav   x000D    position  fixed  x000D    top  10px  x000D    left  0px  x000D    x000D  nav li   x000D    display  inline-block  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt body gt  x000D     lt nav gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt a href   nav-a  gt got to a lt  a gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt a href   nav-b  gt got to b lt  a gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt a href   nav-c  gt got to c lt  a gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  nav gt  x000D     lt div class  header  id  nav-a  gt  x000D   x000D     lt  div gt  x000D     lt div class  middle  id  nav-b  gt  x000D   x000D     lt  div gt  x000D     lt div class  footer  id  nav-c  gt  x000D   x000D     lt  div gt  x000D   x000D   x000D

User · Answer

Another option is to set your child div to display  inline-block    content       display  inline-block      height  100       width  100       background-color  blue       x000D   x000D   container   x000D    display  table  x000D    x000D   child   x000D    width  30px  x000D    background-color  red  x000D    display  table-cell  x000D    vertical-align  top  x000D    x000D   content   x000D    display  inline-block  x000D    height  100   x000D    width  100   x000D    background-color  blue  x000D    x000D   lt div class  container  gt  x000D     lt div class  child  gt  x000D      a x000D       lt br   gt a x000D       lt br   gt a x000D     lt  div gt  x000D     lt div class  child  gt  x000D      a x000D       lt br   gt a x000D       lt br   gt a x000D       lt br   gt a x000D       lt br   gt a x000D       lt br   gt a x000D       lt br   gt a x000D     lt  div gt  x000D     lt div class  child  gt  x000D       lt div class  content  gt  x000D        a x000D         lt br   gt a x000D         lt br   gt a x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      JSFiddle Demo

User · Answer

You have to set the height for the parents  container and child  explicitly  here is another work-around  if you don t want to set that height explicitly     child     width  30px    background-color  red    display  table-cell    vertical-align  top    position relative      content     position absolute    top 0    bottom 0    width 100     background-color  blue      Fiddle

[css] How to make div same height as parent (displayed as table-cell)

Examples related to css

Examples related to html

Examples related to multiple-columns