Child inside parent with min-height 100 not inheriting height

Question

I found a way to make a div container to occupy at least full height of a page  by setting min-height  100    However  when I add a nested div and set height  100    it doesn t stretch to container s height  Is there a way to fix it    x000D   x000D  html  body   x000D    height  100   x000D    margin  0  x000D    x000D   x000D   containment   x000D    min-height  100   x000D    background  pink  x000D    x000D   x000D   containment-shadow-left   x000D    height  100   x000D    background  aqua  x000D    x000D   lt div id  containment  gt  x000D     lt div id  containment-shadow-left  gt  x000D      Hello World  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

thought I would share this  as I didnt see this anywhere  and is what I used to fix my solution   SOLUTION  min-height  inherit   I had a parent with a specified min height  and I needed a child to also be that height    x000D   x000D   parent   x000D    min-height  300px  x000D    background-color  rgba 255 255 0 0 5     yellow x000D    x000D   x000D   child   x000D    min-height  inherit  x000D    background-color  rgba 0 255 0 0 5     blue x000D    x000D   x000D  p   x000D    padding  20px  x000D    color  red  x000D    font-family  sans-serif  x000D    font-weight  bold  x000D    text-align  center  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  x000D       lt p gt Yellow   Blue   Green    lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This way the child now acts as height 100  of the min-height    I hope some people find this useful

User · Answer

The best way to achieve this nowadays is to use display  flex   However you might run into an issue when trying to support IE11  According to https   caniuse com using flexbox       IE 11 does not vertically align items correctly when min-height is used   Internet Explorer compatible solution  The solution is to use display  table  on the parent and display  table-row  on the child both with height  100   as a replacement for min-height  100     Most of the solutions listed here use display  table  table-row and or table-cell  but they don t replicate the same behaviour as min-height  100    which is    Inherit the computed height of the parent  as opposed to inheriting its height property   Allow the parent s height to exceed its min-height    While using this solution  the behaviour is the same and the property min-height is not needed which allows to get around the bug   Explanation  The reason why it works is because  unlike most elements  elements using display  table and table-row will always be as tall as their content  This makes their height property behave similarly to min-height   Solution in action   x000D   x000D  html  body   x000D    height  100px  x000D    margin  0  x000D    x000D   x000D   containment   x000D    display  table  x000D    height  100   x000D    background  pink  x000D    width  100   x000D    x000D   x000D   containment-shadow-left   x000D    display  table-row  x000D    height  100   x000D    background  aqua  x000D    x000D   x000D   content   x000D    padding  15px  x000D    x000D   x000D   demo   x000D    display  none  x000D    background-color  red  x000D    height  200px  x000D    x000D   x000D   demo-checkbox checked    demo   x000D    display  block  x000D    x000D   lt div id  containment  gt  x000D     lt div id  containment-shadow-left  gt  x000D       lt div id  content  gt  x000D         lt input id  demo-checkbox  type  checkbox  gt  x000D         lt label for  demo-checkbox  gt Click here for overflow demo lt  label gt  x000D         lt div id  demo  gt This is taller than  containment lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just to keep this subject complete  I found a solution not explored Here using Fixed position   No Overflow   x000D   x000D  html  body   wrapper   parent   child   x000D    position  fixed  x000D    top  0   x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    margin  0  x000D    padding  0  x000D    height  100   x000D    x000D   x000D   child   x000D    overflow  auto  x000D    background  gray  x000D    x000D   x000D   height-50   x000D    height  50   x000D    width  5em  x000D    margin  10px auto  x000D    background  cyan  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  parent  gt  x000D       lt div class  child  gt  x000D         x000D         lt div class  height-50  gt  lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    With Overflow   x000D   x000D  html  body   wrapper   parent   child   x000D    position  fixed  x000D    top  0   x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    margin  0  x000D    padding  0  x000D    height  100   x000D    x000D   x000D   child   x000D    overflow  auto  x000D    background  gray  x000D    x000D   x000D   height-150   x000D    height  150   x000D    width  5em  x000D    margin  10px auto  x000D    background  cyan  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  parent  gt  x000D       lt div class  child  gt  x000D         x000D         lt div class  height-150  gt  lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In addition to the existing answers  there is also viewport units vh to use  Simple snippet below  Of course it can be used together with calc   as well  e g  min-height  calc 100vh - 200px   when page header and footer have 200px height together    x000D   x000D  body   x000D    margin  0  x000D    x000D   x000D   child   x000D    min-height  100vh  x000D    background  pink  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For googlers   This jquery-workaround makes  containment get a height automatically  by  height  auto   then gets the actual height assigned as a pixel value    lt script type  text javascript  gt   lt  --       function                  workaround for webkit-bug http   stackoverflow com a 8468131 348841          var rz   function                      containment                css  height    auto                css  height       containment   height      px                          window  resize function                  rz                         rz            -- gt   lt  script gt

User · Answer

This usually works for me     x000D   x000D   parent   x000D    min-height  100px  x000D    background-color  green  x000D    display  flex  x000D    x000D   child   x000D    height  inherit  x000D    width  100   x000D    background-color  red  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt body gt  x000D       lt div class  parent  gt  x000D         lt div class  child  gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I don t believe this is a bug with browsers  All behave the same way - that is  once you stop specifying explicit heights  min-height is basically a  last step    It appears to be exactly how the CSS 2 1 spec suggests  http   www w3 org TR CSS2 visudet html the-height-property     The percentage is calculated with respect to the height of the generated box s containing block  If the height of the containing block is not specified explicitly  i e   it depends on content height   and this element is not absolutely positioned  the value computes to  auto     Therefore  as the min-height parent does not have an explicit height property set  it defaults to auto   There are some ways around this possibly by using display  table-cell  or newer styles such as flexbox  if that is possible for your targeted audience s browsers  You can also subvert this in certain situations by using the top and bottom properties on an absolutely positioned inner element  which gives you 100  height without specifying so

User · Answer

Although display  flex  has been suggested here  consider using display  grid  now that it s widely supported  By default  the only child of a grid will entirely fill its parent    x000D   x000D  html  body   x000D    height  100   x000D    margin  0  x000D    padding  0     Don t forget Safari    x000D    x000D   x000D   containment   x000D    display  grid  x000D    min-height  100   x000D    background  pink  x000D    x000D   x000D   containment-shadow-left   x000D    background  aqua  x000D    x000D   x000D   x000D

User · Answer

This is a reported webkit  chrome safari  bug  children of parents with min-height can t inherit the height property  https   bugs webkit org show bug cgi id 26559   Apparently Firefox is affected too  can t test in IE at the moment   Possible workaround    add position relative to  containment add position absolute to  containment-shadow-left   The bug doesn t show when the inner element has absolute positioning   See http   jsfiddle net xrebB   Edit on April 10  2014  Since I m currently working on a project for which I really need parent containers with min-height  and child elements inheriting the height of the container  I did some more research   First  I m not so sure anymore whether the current browser behaviour really is a bug  CSS2 1 specs say       The percentage is calculated with respect to the height of the   generated box s containing block  If the height of the containing   block is not specified explicitly  i e   it depends on content   height   and this element is not absolutely positioned  the value   computes to  auto     If I put a min-height on my container  I m not explicitly specifying its height - so my element should get an auto height  And that s exactly what Webkit - and all other browsers - do   Second  the workaround I found   If I set my container element to display table with height inherit it acts exactly the same way as if I d give it a min-height of 100   And - more importantly - if I set the child element to display table-cell it will perfectly inherit the height of the container element - whether it s 100  or more   Full CSS   html  body     height  100     margin  0      container     background  green    display  table    height  inherit    width  100       content     background  red    display  table-cell      The markup    lt div id  container  gt     lt div id  content  gt         lt p gt content lt  p gt     lt  div gt   lt  div gt    See http   jsfiddle net xrebB 54

User · Answer

after trying for ours  chrome understands that I want the child element to be 100  height when I set the display value to inline block  btw setting float will causing it   display inline-block   update  this is not working  the solution is to get the parentnode offsetheight and use it at the and of the page with javascript     lt script gt      SomedivElement   document getElementById  mydiv        SomedivElement style height   String nvleft parentNode offsetHeight     px        lt  script gt

User · Answer

This was added in a comment by  jackocnr but I missed it  For modern browsers I think this is the best approach   It makes the inner element fill the whole container if it s too small  but expands the container s height if it s too big    containment     min-height  100     display  flex    flex-direction  column      containment-shadow-left     flex  1

User · Answer

Another JS solution  that is easy and can be used to avoid a non-easy CSS-only or extra markup   hacky solution   function minHeight elm  percent      var windowHeight   isNaN window innerHeight                          window clientHeight   window innerHeight    var height   windowHeight   percent   100    elm style minHeight   height    px       W  jQuery    function minHeight  elm  percent      var windowHeight     window  height      var height   windowHeight   percent   100     elm css  min-height   height    px        Angular directive    myModule directive  minHeight      window   function  window      return       restrict   A       link  function scope  elm  attrs          var windowHeight   isNaN  window innerHeight                     window clientHeight    window innerHeight        var height   windowHeight   attrs minHeight   100        elm css  min-height   height    px                      To be used like this     lt div gt     lt  -- height auto here -- gt     lt div min-height  100  gt       lt  -- This guy is at least 100  of window height but grows if needed -- gt     lt  div gt   lt  div gt

User · Answer

Kushagra Gour s solution does work  at least in Chrome and IE  and solves the original problem without having to use display  table  and display  table-cell   See plunker  http   plnkr co edit ULEgY1FDCsk8yiRTfOWU  Setting min-height  100   height  1px  on the outer div causes its actual height to be at least 100   as required  It also allows the inner div to correctly inherit the height

User · Answer

This is what works for me with percentage-based height and parent still growing according to children height  Works fine in Firefox  Chrome and Safari    x000D   x000D   parent   x000D    position  relative  x000D    min-height  100   x000D    x000D   x000D   child   x000D    min-height  100vh  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

Add height  1px to parent container  Works in Chrome  FF  Safari

[css] Child inside parent with min-height: 100% not inheriting height

Examples related to css

Examples related to html