Relative div height

Question

I want to split up the view in four parts  A header at the top  using full page width and fixed height   The remaining page is split up in two blocks of the same height  the upper of them contains two same-sized blocks next to each other   What I tried is  without the header     wrap     width  100     height  100       block12     width  100     max-height  49       block1   block2     width  50     height  100     float  left    overflow-y  scroll      block3     width  100     height  49     overflow  auto      background  blue        clear     clear  both       lt div id  wrap  gt     lt div id  block12  gt       lt div id  block1  gt  lt  div gt       lt div id  block2  gt  lt  div gt       lt div class  clear  gt  lt  div gt     lt  div gt     lt div id  block3  gt  lt  div gt   lt  div gt    Apparently  using a percentage value for the height won t work that way  Why is that so

User · Answer

The div take the height of its parent  but since it has no content  expecpt for your divs  it will only be as height as its content   You need to set the height of the body and html   HTML    lt div class  block12  gt       lt div class  block1  gt 1 lt  div gt       lt div class  block2  gt 2 lt  div gt   lt  div gt   lt div class  block3  gt 3 lt  div gt    CSS   body  html       width  100       height  100       margin  0      padding  0     block12       width  100       height  50       background  yellow      overflow  auto     block1   block2       width  50       height  100       display  inline-block      margin-right  -4px      background  lightgreen     block2   background  lightgray    block3       width  100       height  50       background  lightblue      And a JSFiddle

User · Answer

Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop     See this    percentage in height doesn   t work

User · Answer

When you set a percentage height on an element who s parent elements don t have heights set  the parent elements have a default  height  auto    You are asking the browser to calculate a height from an undefined value  Since that would equal a null-value  the result is that the browser does nothing with the height of child elements   Besides using a JavaScript solution you could use this deadly easy table method    parent3       display  table      width  100       parent3  between       display  table-row      parent3  child       display  table-cell      Preview on http   jsbin com IkEqAfi 1   Example 1  Not working Example 2  Fix height Example 3  Table method   But  Bare in mind  that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher  As Fallback you could use JavaScript

User · Answer

add this to you CSS   html  body       height  100       working Fiddle  when you say to wrap to be 100   100  of what  of its parent  body   so his parent has to have some height   and the same goes for body  his parent his html  html parent his the viewport   so  by setting them both to 100   wrap can also have a percentage height   also  the elements have some default padding margin  that causes them to span a little more then the height you applied to them   causing a scroll bar  you can use          padding  0      margin  0      to disable that   Look at That Fiddle

User · Answer

Basically  the problem lies in block12  for the block1 2 to take up the total height of the block12  it must have a defined height  This stack overflow post explains that in really good detail    So setting a defined height for block12 will allow you to set a proper height  I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page    Here is an example including a header and block3 div with some content in for examples    header     position absolute     top 0     left 0     width 100      height 20               block12      position absolute      top 20       width 100       left 0      height 40              block1  block2      float left      overflow-y  scroll      text-align center      color red      width 50       height 100            clear clear both     block3      position absolute      bottom 0      color blue      height 40

User · Answer

add this to your css   html  body height  100     and change the max-height of  block12 to height  Explanation   Basically  wrap was 100  height  relative measure  but when you use relative measures it looks for its parent element s measure  and it s normally undefined because it s also relative  The only element s  being able to use a relative heights are body and or html themselves depending on the browser  the rest of the elements need a parent element with absolute height   But be careful  it s tricky playing around with relative heights  you have to calculate properly your header s height so you can substract it from the other element s percentages

[html] Relative div height

Examples related to html

Examples related to css

Examples related to height

Examples related to css-position