Why doesn t height 100 work to expand divs to the screen height

Question

I want the carousel DIV  s7  to expand to the height of the entire screen  I haven t an idea as to why it s not succeeding  To see the page you can go here    x000D   x000D  body   x000D    height  100   x000D    color   FFF  x000D    font  normal 28px 28px HelveticaWorldRegular   Helvetica  Arial  Sans-Serif  x000D    background   222 url     no-repeat center center fixed  x000D    overflow  hidden  x000D    background-size  cover  x000D    margin  0  x000D    padding  0  x000D    x000D   holder   x000D    height  100   x000D    margin  auto  x000D    x000D   s7   x000D    width  100   x000D    height  100   margin  auto  x000D    overflow  hidden  x000D    z-index  1  x000D    x000D   s7  posts   x000D    width  100   x000D    min-height  100   x000D    color   FFF  x000D    font-size  13px  x000D    text-align  left  x000D    line-height  16px  x000D    margin  auto  x000D    background   AAA  x000D    x000D   lt div class  nav  gt  x000D     lt a class  prev2  id  prev2  href     gt  x000D       lt img src  http   static tumblr com ux4v5bf ASslogxz4 left png  gt  x000D     lt  a gt  x000D     lt a class  next2  id  next2  href     gt  x000D       lt img src  http   static tumblr com ux4v5bf swslogxmg right png  gt  x000D     lt  a gt  x000D   lt  div gt  x000D   x000D   lt div class  holder  gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div id  s7  gt  x000D           block Posts  x000D           lt div id  posts  gt  x000D   x000D   x000D

User · Answer

You should try with the parent elements   html  body  form  main       height  100       Then this will be enough     s7      height  100

User · Answer

You will also need to set 100  height on the html element   html   height 100

User · Answer

If you absolutely position the elements inside the div  you can set the padding top and bottom to 50    So something like this    s7       position  relative      width 100       padding  50  0      margin auto      overflow  hidden      z-index 1

User · Answer

Alternatively  if you use position  absolute then height  100  will work just fine

User · Answer

if you want  for example  a left column  height 100   and the content  height auto  you can use absolute     left column       float left      position  absolute      max-height 100       height auto  important      height  100       overflow  hidden       width   180px     for example        left column div       height  2000px      right column       float left      height 100       margin-left   180px     left column s width        in html       lt div id  content  gt         lt div id  left column  gt          my navigation content          lt div gt  lt  div gt         lt  div gt          lt div id  right column  gt          my content        lt  div gt      lt  div gt

User · Answer

In order for a percentage value to work for height  the parent s height must be determined  The only exception is the root element  lt html gt   which can be a percentage height     So  you ve given all of your elements height  except for the  lt html gt   so what you should do is add this   html       height  100       And your code should work fine  x000D   x000D      padding  0  margin  0    x000D  html  body   fullheight   x000D      min-height  100   important  x000D      height  100   x000D    x000D   fullheight   x000D      width  250px  x000D      background  blue  x000D    x000D   lt div id fullheight gt  x000D    Lorem Ipsum         x000D   lt  div gt  x000D   x000D   x000D    JsFiddle example

User · Answer

Here s another solution for people who don t want to use html  body   blah   height  100       x000D   x000D   app   x000D    position  fixed  x000D    left  0  x000D    right  0  x000D    top  0  x000D    bottom  0  x000D    overflow-y  auto  x000D    x000D   x000D   full-height   x000D    height  100   x000D    x000D   x000D   test   x000D    width  10px  x000D    background  red  x000D    x000D   lt div class  app  gt  x000D     lt div class  full-height test  gt  x000D     lt  div gt  x000D    Scroll works too x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Since nobody has mentioned this   Modern Approach  As an alternative to setting both the html body element s heights to 100   you could also use viewport-percentage lengths   5 1 2  Viewport-percentage lengths  the    vw        vh        vmin        vmax    units The viewport-percentage lengths are relative to the size of the initial containing block  When the height or width of the initial containing block is changed  they are scaled accordingly   In this instance  you could use the value 100vh  which is the height of the viewport  -  example  body       height  100vh     Setting a min-height also works   example  body       min-height  100vh     These units are supported in most modern browsers - support can be found here

User · Answer

In the page source I see the following    lt div class  holder  gt        lt div id  s7  style  position  relative  width  1366px  height  474px  overflow  hidden   gt    If you put the height value in the tag  it will use this instead of the height defined in the css file

User · Answer

Try to play around also with the calc and overflow functions  myClassName       overflow  auto      height  calc 100  - 1 5em

User · Answer

This may not be ideal but you can allways do it with javascript  Or in my case jQuery   lt script gt  var newheight       innerdiv   css  height        mainwrapper   css  height   newheight    lt  script gt

[html] Why doesn't height: 100% work to expand divs to the screen height?

Examples related to html

Examples related to css

Examples related to height