How to stretch div height to fill parent div - CSS

Question

I have a page with divs like below  lt div id  quot container quot  gt       lt div id  quot A quot  gt  lt  div gt       lt div id  quot B quot  gt           lt div id  quot B1 quot  gt  lt  div gt           lt div id  quot B2 quot  gt B2 lt  div gt       lt  div gt       lt div id  quot C quot  gt  lt  div gt       lt div id  quot D quot  gt  lt  div gt   lt  div gt   with styling as  html  body       margin  0      padding  0      border  0     B   C   D       position  absolute     A      top  0      width  100       height  35px      background-color   99CC00     B       top  35px      width  200px      bottom  35px      background-color   999999      z-index 100     B2       margin-top  -35px      bottom  0      background-color   FFFFFF      width  200px      overflow  scroll     B1       height  35px      width  35px      margin-left  200px      background-color   CC0066     C       top  35px      left  200px      right  0      bottom  35px      background-color   CCCCCC     D       bottom  0      width  100       height  35px      background-color   3399FF     I want to adjust the height of div B2 to fill  or stretch to  entire div B  marked with a green border  and don t want to cross footer div D  Here is a working fiddle demo updated   How can I solve this

User · Answer

http   jsfiddle net QWDxr 1   Use the  min-height  property Be wary of paddings  margins and borders     html  body       margin  0      padding  0      border  0     B   C   D       position  absolute     A      top  0      width  100       height  35px      background-color   99CC00     B       top  35px      width  200px      bottom  35px      background-color   999999      z-index 100     B2       min-height  100       height  100       margin-top  -35px      bottom  0      background-color  red      width  200px      overflow  scroll     B1       height  35px      width  35px      margin-left  200px      background-color   CC0066     C       top  35px      left  200px      right  0      bottom  35px      background-color   CCCCCC     D       bottom  0      width  100       height  35px      background-color   3399FF

User · Answer

Suppose you have   lt body gt     lt div id  root    gt   lt  body gt    With normal CSS  you can do the following  See a working app https   github com onmyway133 Lyrics blob master index html   root     position  absolute    top  0    left  0    height  100     width  100       With flexbox  you can  html  body     height  100    body     display  flex    align-items  stretch      root     width  100

User · Answer

B2 container position relative  Top position B2   of remaining height  Height of B2   height B1 or remaining height

User · Answer

What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount   What worked  at least on firefox  was this   lt div style  position  absolute  top  127px  left  75px right  75px  bottom  50px   gt   Insofar as the actual window is not forced into scrolling  the div preserves its boundaries to the window edge during all re-sizing   Hope this saves someone some time

User · Answer

If you re gonna use B2 for styling purposes you can try this  hack    B   overflow  hidden    B2  padding-bottom  9999px  margin-bottom  -9999px    jsFiddle

User · Answer

I d solve it with a javascript solution  jQUery  if the sizes can vary   window setTimeout function            document  ready function              var ResizeTarget       B             ResizeTarget resize function                  var target       B2                target css  height   ResizeTarget height                trigger  resize                500

User · Answer

Simply add height  100   onto the  B2 styling  min-height shouldn t be necessary

[html] How to stretch div height to fill parent div - CSS

Examples related to html

Examples related to css