CSS How to set div height 100 minus nPx

Question

I have a wrapper div which contans 2 divs next to each other  Above this container I have a div that contains my header  The wrapper div must be 100  minus the height of the header  The header is about 60 px  This is fixed  So my question is  how do I set the height my wrapper div to be 100  minus the 60 px    lt div id  header  gt  lt  div gt   lt div id  wrapper  gt     lt div id  left  gt  lt  div gt     lt div id  right  gt  lt  div gt   lt  div gt

User · Answer

div       height  100       height  -webkit-calc 100  - 60px       height  -moz-calc 100  - 60px       height  calc 100  - 60px       Make sure while using less   height   calc 100  - 60px     Otherwise less is no going to compile it correctly

User · Answer

Here is a working css  tested under Firefox   IE7   Safari   Chrome   Opera      margin 0px padding 0px overflow hidden  div  position absolute  div header  top 0px left 0px right 0px height 60px  div wrapper  top 60px left 0px right 0px bottom 0px   div left  top 0px bottom 0px left 0px width 50  overflow-y auto  div right  top 0px bottom 0px right 0px width 50  overflow-y auto     overflow-y  is not w3c-approved  but every major browser supports it  Your two divs  left and  right will display a vertical scrollbar if their content is too high   For this to work under IE7  you have to trigger the standards-compliant mode by adding a DOCTYPE      x000D   x000D   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN  x000D               http   www w3 org TR html4 strict dtd  gt  x000D   lt html gt  x000D   lt head gt  x000D   lt title gt  lt  title gt  x000D   lt style type  text css  gt  x000D     margin 0px padding 0px overflow hidden  x000D   div position absolute  x000D   div header top 0px left 0px right 0px height 60px  x000D   div wrapper top 60px left 0px right 0px bottom 0px   x000D   div left top 0px bottom 0px left 0px width 50  overflow-y auto  x000D   div right top 0px bottom 0px right 0px width 50  overflow-y auto  x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div id  header  gt  lt  div gt  x000D   lt div id  wrapper  gt  x000D     lt div id  left  gt  lt div style  height 1000px  gt high content lt  div gt  lt  div gt  x000D     lt div id  right  gt  lt  div gt  x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

In this example you can identify different areas    lt html gt   lt style gt   divContainer       width  100       height  100      divHeader       position  absolute      left  0px      top  0px      right  0px      height  28px      background-color blue     divContentArea       position  absolute      left  0px      top  30px      right  0px      bottom  30px     divContentLeft       position  absolute      top  0px      left  0px      width  200px      bottom  0px      background-color red     divContentCenter       position  absolute      top  0px      left  200px      bottom  0px      right 200px      background-color yellow     divContentRight       position  absolute      top  0px      right  0px      bottom  0px      width 200px      background-color red     divFooter       position  absolute      height  28px      left  0px      bottom  0px      right  0px      background-color blue     lt  style gt   lt body  gt    lt div id  divContainer  gt       lt div id  divHeader  gt  top      lt  div gt       lt div id  divContentArea  gt           lt div id  divContentLeft  gt left          lt  div gt           lt div id  divContentCenter  gt center          lt  div gt           lt div id  divContentRight  gt right          lt  div gt       lt  div gt       lt div id  divFooter  gt bottom      lt  div gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

I haven t seen anything like this posted yet  but I thought I d put it out there     lt div class  main  gt   lt header gt Header lt  header gt   lt div class  content  gt Content lt  div gt      Then CSS   body  html       height  100       margin  0      padding  0      main       height  100       padding-top  50px      box-sizing  border-box     header       height  50px      margin-top  -50px      width  100       background-color   5078a5      content       height  100       background-color   999999      Here is a working jsfiddle  Note  I have no idea what the browser compatability is for this  I was just playing around with alternate solutions and this seemed to work well

User · Answer

This doesn t exactly answer the question as posed  but it does create the same visual effect that you are trying to achieve    lt style gt   body     border 0    padding 0    margin 0    padding-top 60px      header     position absolute    top 0    height 60px    width 100       wrapper     height 100     width 100      lt  style gt

User · Answer

You can do something like   height  calc 100  - nPx   for example   height  calc 100  - 70px

User · Answer

In CSS3 you could use   height  calc 100  - 60px

User · Answer

Use an outer wrapper div set to 100  and then your inner wrapper div 100  should be now relative to that   I thought for sure this used to work for me  but apparently not    lt html gt   lt body gt   lt div id  outerwrapper  style  border   1px solid red   height   100   gt   lt div id  header  style  border   1px solid blue   height   60px  gt  lt  div gt   lt div id  wrapper   style  border   1px solid green   height   100    overflow   scroll    gt     lt div id  left  style  height   100    width   50    overflow   scroll  float   left   clear   left    gt Some text   on the left lt  div gt     lt div id  right  style  height   100    width 50    overflow   scroll  float   left    gt Some Text on the   right lt  div gt   lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

great one    now i have stopped using   he he he    except for the main container as shown below    lt div id  divContainer  gt       lt div id  divHeader  gt       lt  div gt       lt div id  divContentArea  gt           lt div id  divContentLeft  gt           lt  div gt           lt div id  divContentRight  gt           lt  div gt       lt  div gt       lt div id  divFooter  gt       lt  div gt   lt  div gt    and here is the css    divContainer       width  100       height  100      divHeader       position  absolute      left  0px      top  0px      right  0px      height  28px     divContentArea       position  absolute      left  0px      top  30px      right  0px      bottom  30px     divContentLeft       position  absolute      top  0px      left  0px      width  250px      bottom  0px     divContentRight       position  absolute      top  0px      left  254px      right  0px      bottom  0px     divFooter       position  absolute      height  28px      left  0px      bottom  0px      right  0px      i tested this in all known browsers and is working fine  Are there any drawbacks using this way

User · Answer

If you need to support IE6  use JavaScript so manage the size of the wrapper div  set the position of the element in pixels after reading the window size   If you don t want to use JavaScript  then this can t be done  There are workarounds but expect a week or two to make it work in every case and in every browser   For other modern browsers  use this css   position  absolute  top  60px  bottom  0px

User · Answer

If you don t want to use absolute positioning and all that jazz  here s a fix I like to use   your html    lt body gt          lt div id  header  gt  lt  div gt      lt div id  wrapper  gt  lt  div gt   lt  body gt    your css   body        height 100        padding-top 60px     header        margin-top 60px       height 60px     wrapper        height 100

[css] CSS How to set div height 100% minus nPx

Examples related to css

Examples related to height