100 height minus header

Question

I want to create a layout for an admin panel  but I dont know how to get the  nav and  content container always at 100  of the browser window  I don t understand the inherit of 100  height attributes  could someone explain it more clearly    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt title gt index htm lt  title gt       lt link rel  stylesheet  type  text css  href  main css  gt   lt  head gt   lt body gt            lt div id  header  gt               lt img src    img header logo png  alt  bla   gt           lt  div gt  lt  --  header -- gt           lt div id  nav  gt           lt  div gt  lt  --  nav -- gt           lt div id  content  gt          asfdg          lt  div gt  lt  --  content -- gt           lt div class  clear  gt           lt  div gt    lt  body gt   lt  html gt    main css      html  body      font-family  Helvetica   Helvetica Neue   Arial  Geneva  sans-serif      margin  0px      padding  0px      height  100     img      margin  0px      padding  0px      border-width  0px     wrapper      header      background  url img header bg png  repeat-x      height  65px      padding-top  20px      padding-left  25px     nav      width  235px      float  left       background-color   f7f7f7      border-right  1px solid  d9d9d9      height  100       content      float  left      width  auto      padding  15px      clear      clear  both      any ideas

User · Accepted Answer

If your browser supports CSS3  try using the CSS element Calc    height  calc 100  - 65px     you might also want to adding browser compatibility options   height  -o-calc 100  - 65px      opera    height  -webkit-calc 100  - 65px      google  safari    height  -moz-calc 100  - 65px      firefox      also make sure you have spaces between values  see  https   stackoverflow com a 16291105 427622

User · Answer

As mentioned in the comments height 100  relies on the height of the parent container being explicitly defined   One way to achieve what you want is to use absolute relative positioning  and specifying the left right top bottom properties to  stretch  the content out to fill the available space  I have implemented what I gather you want to achieve in jsfiddle   Try resizing the Result window and you will see the content resizes automatically   The limitation of this approach in your case is that you have to specify an explicit margin-top on the parent container to offset its contents down to make room for the header content   You can make it dynamic if you throw in javascript though

User · Answer

For  100  of the browser window   if you mean this literally  you should use fixed positioning  The top  bottom  right  and left properties are then used to offset the divs edges from the respective edges of the viewport    nav   content position fixed top 0px bottom 0px    nav left 0px right 235px    content left 235px right 0px    This will set up a screen with the left 235 pixels devoted to the nav  and the right rest of the screen to content    Note  however  you won t be able to scroll the whole screen at once  Though you can set it to scroll either pane individually  by applying overflow auto to either div   Note also  fixed positioning is not supported in IE6 or earlier

[html] 100% height minus header?

Examples related to html

Examples related to css