For div to extend full height

Question

Is there a method I can use for a div to extend to full height  I ve got a sticky footer in it as well   Here s the web page  Website removed  The middle bit I m talking about is the white div  midcontent which has CSS values    midcontent       width 85        margin 0 auto       padding 10px 20px       padding-top 0       background-color  FFF       overflow hidden       min-height 100        max-width 968px        height 100       So yes  obviously height 100  didn t work  Additionally  ALL parent containers have height set   Here s the general structure   lt body gt       lt div id  wrap  gt           lt div id  main  gt               lt div class  headout  gt                   lt div class  headimg  gt  lt  div gt               lt  div gt               lt div class  midcontainer  gt  lt  div gt           lt  div gt       lt  div gt       lt div id  footer  gt           lt div class  footer  gt  lt  div gt       lt  div gt

User · Answer

if setting height to 100  doesn t work  try min-height 100  for div  You still have to set the html tag   html       height  100       margin  0px      padding  0px      position  relative      fullHeight       width  450px        min-height  100         background-color  blue

User · Answer

This might be of some help  http   www webmasterworld com forum83 200 htm  A relevant quote      Most attempts to accomplish this were made by assigning the property and value     div height 100   - this alone will not work  The reason is that without a parent defined    height  the div height 100    has nothing to factor 100  percent of  and will default to a    value of div height auto   - auto is an  as needed value  which is governed by the actual    content  so that the div height 100   will a only extend as far as the content demands       The solution to the problem is found by assigning a height value to the parent container     in this case  the body element  Writing your body stlye to include height 100  supplies   the needed value   html  body      margin 0     padding 0     height 100

User · Answer

In case also setting the height of the html and the body to 100  makes everything messier for you as it did for me  the following worked for me   height  calc 100vh - 33rem    The - 33rem is the height of the elements coming after the one we want to take full height  i e   100vh  By subtracting the height  we will make sure there is no overflow and it will always be responsive  assuming we are working with rem instead of px

User · Answer

Did you remember setting the height of the html and body tags in your CSS  This is generally how I ve gotten DIVs to extend to full height      lt html gt     lt head gt       lt style type  text css  gt         html body   height  100   margin  0px  padding  0px           full   background   0f0  height  100          lt  style gt     lt  head gt     lt body gt       lt div id  full  gt       lt  div gt     lt  body gt   lt  html gt

User · Answer

This is an old question  CSS has evolved  There now is the vh  viewport height  unit  also new layout options like flexbox or CSS grid to achieve classical designs in cleaner ways

[css] For div to extend full height

Examples related to css

Examples related to xhtml

Examples related to html