div with dynamic min-height based on browser window height

Question

I have three div elements  one as a header  one as a footer  and a center content div   the div in the center needs to expand automatically with content  but I would like a min-height such that the bottom div always at least reaches the bottom of the window  but is not fixed there on longer pages   For example    lt div id  a  style  height  200px   gt     lt p gt This div should always remain at the top of the page content and should scroll with it  lt  p gt   lt  div gt   lt div id  b  gt     lt p gt This is the div in question  On longer pages  this div needs to behave normally  i e  expand to fit the content and scroll with the entire page   On shorter pages  this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport  regardless of monitor resolution or window size   lt  div gt   lt div id  c  style  height  100px   gt     lt p gt This div needs to remain at the bottom of the page s content  and scroll with it on longer pages  but on shorter pages  needs to reach the bottom of the browser window  regardless of monitor resolution or window size  lt  p gt   lt  div gt

User · Answer

It s hard to do this   There is a min-height  css style  but it doesn t work in all browsers  You can use it  but the biggest problem is that you will need to set it to something like 90  or numbers like that  percents   but the top and bottom divs use fixed pixel sizes  and you won t be able to reconcile them    var minHeight     window  height   -                      a   outerHeight true  -                      c   outerHeight true     if     b   height    lt  minHeight      b   height minHeight     I know a and c have fixed heights  but I rather measure them in case they change later   Also  I am measuring the height of b  I don t want to make is smaller after all   but if there is an image in there that did not load the height can change  so watch out for things like that   It may be safer to do       b   prepend   lt div style  float  left  width  1px  height      minHeight    px   gt  amp nbsp  lt  div gt       Which simply adds an element into that div with the correct height - that effectively acts as min-height even for browsers that don t have it   You may want to add the element into your markup  and then just control the height of it via javascript instead of also adding it that way  that way you can take it into account when designing the layout

User · Answer

As mentioned elsewhere  the CSS function calc   can work nicely here   It is now mostly supported   You could use like    container       min-height  70       min-height  -webkit-calc 100  - 300px       min-height  -moz-calc 100  - 300px       min-height  calc 100  - 300px

User · Answer

to get dynamic height based on browser window  Use vh instead of    e g  pass following height  100vh  to the specific div

User · Answer

Just look for my solution on jsfiddle  it is based on csslayout   x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    height  100      needed for container min-height    x000D    x000D  div container   x000D    position  relative     needed for footer positioning   x000D    height  auto  important     real browsers    x000D    min-height  100      real browsers    x000D    x000D  div header   x000D    padding  1em  x000D    background   efe  x000D    x000D  div content   x000D       padding 1em 1em 5em       bottom padding for footer    x000D    x000D  div footer   x000D    position  absolute  x000D    width  100   x000D    bottom  0     stick to bottom    x000D    background   ddd  x000D    x000D   lt div id  container  gt  x000D   x000D     lt div id  header  gt header lt  div gt  x000D   x000D     lt div id  content  gt  x000D      content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt content lt br  gt  x000D     lt  div gt  x000D   x000D     lt div id  footer  gt  x000D      footer x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I found this courtesy of ryanfait com  It s actually remarkably simple   In order to float a footer to the bottom of the page when content is shorter than window-height  or at the bottom of the content when it is longer than window-height  utilize the following code   Basic HTML structure    lt div id  content  gt    Place your content here     lt div id  push  gt  lt  div gt   lt  div gt   lt div id  footer  gt    Place your footer information here   lt  footer gt    Note  Nothing should be placed outside the   content  and   footer  divs unless it is absolutely positioned   Note  Nothing should be placed inside the   push  div as it will be hidden   And the CSS         margin  0    html  body     height  100      content     min-height  100     height  auto  important    min-height hack     height  100                min-height hack     margin-bottom  -4em        Negates  push on longer pages      footer   push     height  4em      To make headers or footers span the width of a page  you must absolutely position the header   Note  If you add a page-width header  I found it necessary to add an extra wrapper div to  content  The outer div controls horizontal spacing while the inner div controls vertical spacing  I was required to do this because I found that  min-height   works only on the body of an element and adds padding to the height    Edit  missing semicolon

User · Answer

No hack or js needed  Just apply the following rule to your root element   min-height  100   height  auto    It will automatically choose the bigger one from the two as its height  which means if the content is longer than the browser  it will be the height of the content  otherwise  the height of the browser  This is standard css

User · Answer

You propably have to write some JavaScript  because there is no way to estimate the height of all the users of the page

User · Answer

If  top and  bottom have fixed heights  you can use   top       position  absolute      top  0      height  200px     bottom       position  absolute      bottom  0      height  100px     central       margin-top  200px      margin-bot  100px      update If you want  central to stretch down  you could   Fake it with a background on parent  Use CSS3 s  not widely supported  most likely  calc    Or maybe use javascript to dynamically add min-height   With calc     central       min-height  calc 100  - 300px      With jQuery it could be something like    document  ready function       var desiredHeight      quot body quot   height   -    quot top quot   height   -    quot bot quot   height         quot  central quot   css  quot min-height quot   desiredHeight

[viewport] div with dynamic min-height based on browser window height

Examples related to viewport

Examples related to css