How to make a floated div 100 height of its parent

Question

Here is the HTML    lt div id  outer  gt       lt div id  inner  gt  lt  div gt      Test  lt  div gt    And here is the CSS    inner     float  left    height  100       Upon inspection with the Chrome developer tools  the inner div is getting a height of 0px   How can I force it to be 100  of the height of the parent div

User · Answer

try    outer overflow  auto     show more options in   How do you keep parents of floated elements from collapsing

User · Answer

Here it is a simpler way to achieve that     Set the three elements  container   outer  display  table And set the elements themselves   inner  display  table-cell  Remove the floating   Success     outer      display  table     inner       display  table-cell      float  none      Thanks to  Itay in Floated div  100  height

User · Answer

I made an example resolving your problem   You have to make a wrapper  float it  then position absolute your div and give to it 100  height    HTML   lt div class  container  gt       lt div class  left  gt  Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum    lt  div gt     lt div class  right-wrapper  gt       lt div class  right  gt  Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua    lt  div gt     lt  div gt     lt div class  clear  gt  amp nbsp  lt  div gt   lt  div gt    CSS    container       width  100       position relative     left       width  50       background-color  rgba 0  0  255  0 6       float  left     right-wrapper       width  48       float  left     right       height  100       position  absolute      Explanation  The  right div is absolutely positioned  That means that its width and height  and top and left positiones will be calculed based on the first parent div absolutely or relative positioned ONLY if width or height properties are explicitly declared in CSS  if they aren t explicty declared  those properties will be calculed based on the parent container   right-wrapper    So  the 100  height of the DIV will be calculed based on  container final height  and the final position of  right position will be calculed based on the parent container

User · Answer

This is a code sample for grid system with equal height    outer  width  100   margin-top  1rem  display  flex  height auto      Above is the CSS for outer div   inner  width  20   float  left  border  1px solid      Above is the inner div  Hope this help you

User · Answer

If you re prepared to use a little jQuery  the answer is simple     function             parent   find   child   css  height       parent   innerHeight           This works well for floating a single element to a side with 100  height of it s parent while other floated elements which would normally wrap around are kept to one side   Hope this helps fellow jQuery fans

User · Answer

A similar case when you need several child elements have the same height can be solved with flexbox   https   css-tricks com using-flexbox   Set display  flex  for parent and flex  1  for child elements  they all will have the same height

User · Answer

As long as you don t need to support versions of Internet Explorer earlier than IE8  you can use display  table-cell to accomplish this   HTML    lt div class  outer  gt       lt div class  inner  gt           lt p gt Menu or Whatever lt  p gt       lt  div gt       lt div class  inner  gt           lt p gt Page contents    lt  p gt       lt  div gt   lt  div gt    CSS    inner       display  table-cell      This will force each element with the  inner class to occupy the full height of its parent element

User · Answer

Actually  as long as the parent element is positioned  you can set the child s height to 100   Namely  in case you don t want the parent to be absolutely positioned  Let me explain further    lt style gt       outer2           padding-left  23px          position  relative           height auto           width 200px           border  1px solid red              inner2           left 0          position absolute           height 100            width 20px           border  1px solid black          lt  style gt    lt div id  outer2  gt       lt div id  inner2  gt       lt  div gt   lt  div gt

User · Answer

For  outer height to be based on its content  and have  inner base its height on that  make both elements absolutely positioned   More details can be found in the spec for the css  height property  but essentially   inner must ignore  outer height if  outer s height is auto  unless  outer is positioned absolutely  Then  inner height will be 0  unless  inner itself is positioned absolutely    lt style gt       outer           position absolute           height auto  width 200px           border  1px solid red              inner           position absolute           height 100            width 20px           border  1px solid black          lt  style gt    lt div id  outer  gt       lt div id  inner  gt       lt  div gt      text  lt  div gt    However    By positioning  inner absolutely  a float setting will be ignored  so you will need to choose a width for  inner explicitly  and add padding in  outer to fake the text wrapping I suspect you want  For example  below  the padding of  outer is the width of  inner  3  Conveniently  as the whole point was to get  inner height to 100   there s no need to wrap text beneath  inner  so this will look just like  inner is floated    lt style gt       outer2          padding-left  23px          position absolute           height auto           width 200px           border  1px solid red              inner2          left 0          position absolute           height 100            width 20px           border  1px solid black         lt  style gt    lt div id  outer2  gt       lt div id  inner2  gt       lt  div gt      text  lt  div gt    I deleted my previous answer  as it was based on too many wrong assumptions about your goal

User · Answer

For the parent   display  flex    You should add some prefixes http   css-tricks com using-flexbox   Edit  Only drawback is IE as usual  IE9 does not support flex  http   caniuse com flexbox  Edit 2  As  toddsby noted  align items is for parent  and its default value actually is stretch  If you want a different value for child  there is align-self property   Edit 3  jsFiddle  https   jsfiddle net bv71tms5 2

User · Answer

This helped me    outer       position relative     inner       position absolute      top 0      left 0px      right 0px      height 100       Change right  and left  to set preferable  inner width

[css] How to make a floated div 100% height of its parent?

Examples related to css

Examples related to html

Examples related to height