CSS Set Div height to 100 - Pixels

Question

I have a header on my page which is just over 100px  111px to be exact  The div below it needs to extend to the bottom of the viewport  as if i had set the bottom to 0px  The problem lies in the fact that i cannot specify top and bottom in ie6  bug    I can either specify top  111px or bottom  0px  but i still need the height to be correct ie  100  -111px  according to the size of the viewport   Can t seem to get expressions working coz that seems to be the solution  Here s my css code   position  absolute   width  200px   top  111px   bottom  0px    Any suggestions

User · Answer

x000D   x000D  div  x000D    height 100vh  x000D    background-color gray  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

I m guessing that you are trying to get sticky footer

User · Answer

The best way to do this is to use view port styles  It just does the work and no other techniques needed   Code    x000D   x000D  div  x000D    height 100vh  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Negative margins of course   HTML   lt div id  header  gt       lt h1 gt Header Text lt  h1 gt   lt  div gt   lt div id  wrapper  gt       lt div id  content  gt          Lorem ipsum dolor sit amet  consectetur adipiscing elit  Curabitur          ullamcorper velit aliquam dolor dapibus interdum sed in dolor  Phasellus          vel quam et quam congue sodales       lt  div gt   lt  div gt    CSS   header       height  111px      margin-top  0px     wrapper       margin-bottom  0px      margin-top  -111px      height  100       position relative      z-index -1     content       margin-top  111px      padding  0 5em

User · Answer

Now with css3 you could try to use calc     main    height  calc 100  - 111px       have a look at this answer  Div width 100  minus fixed amount of pixels

User · Answer

100vh works for me  but at first I had used javascript  actually jQuery  but you can adapt it   to tackle a similar problw   HTML   lt body gt     lt div id  wrapper  gt       lt div id  header  gt header lt  div gt       lt div id  content  gt content lt  div gt     lt  div gt   lt  body gt    js jQuery  var innerWindowHeight     window  height    var headerHeight       header   height    var contentHeight   innerWindowHeight - headerHeight      content   height contentHeight    px      Alternately  you can just use 111px if you don t want to calculate headerHeight   Also  you may want to put this in a window resize event  to rerun the script if the window height increases for example

User · Answer

I added the height property to the body and html tags   HTML    lt body gt   lt div id  wrapper  gt    lt div id  header  gt header lt  div gt    lt div id  content  gt content lt  div gt   lt  div gt    CSS   html  body       height  100       min-height  100       margin  0      padding  0     wrapper       height  100       min-height  100      header       height  111px

User · Answer

x000D   x000D  div  x000D    height 100vh  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Alternatively  you can just use position absolute    content       position absolute      top  111px      bottom  0px      However  IE6 doesn t like top and bottom declarations  But web developers don t like IE6

[css] CSS: Set Div height to 100% - Pixels

Examples related to css

Examples related to html

Examples related to height