100 Min Height CSS layout

Question

What s the best way to make an element of 100  minimum height across a   wide range of browsers     In particular if you have a layout with a header and footer of fixed height   how do you make the middle content part fill 100  of the space in between with the footer fixed to the bottom

User · Answer

A pure CSS solution   content   min-height  100      will work in a lot of cases  but not in all of them - especially IE6 and IE7   Unfortunately  you will need to resort to a JavaScript solution in order to get the desired behavior  This can be done by calculating the desired height for your content  lt div gt  and setting it as a CSS property in a function   function resizeContent       var contentDiv   document getElementById  content      var headerDiv   document getElementById  header         This may need to be done differently on IE than FF  but you get the idea    var viewPortHeight   window innerHeight - headerDiv clientHeight    contentDiv style height        Math max viewportHeight  contentDiv clientHeight     px       You can then set this function as a handler for onLoad and onResize events    lt body onload  resizeContent    onresize  resizeContent    gt           lt  body gt

User · Answer

Here is another solution based on vh  or viewpoint height  for details visit CSS units  It is based on this solution  which uses flex instead    x000D   x000D      x000D         personal preference    x000D      margin  0  x000D      padding  0  x000D    x000D  html   x000D         make sure we use up the whole viewport    x000D      width  100   x000D      min-height  100vh  x000D         for debugging  a red background lets us see any seams    x000D      background-color  red  x000D    x000D  body   x000D         make sure we use the full width but allow for more height    x000D      width  100   x000D      min-height  100vh     this helps with the sticky footer    x000D    x000D  main   x000D         for debugging  a blue background lets us see the content    x000D      background-color  skyblue  x000D   min-height  calc 100vh - 2 5em      this leaves space for the sticky footer    x000D    x000D  footer   x000D         for debugging  a gray background lets us see the footer    x000D      background-color  gray  x000D   min-height 2 5em  x000D    x000D   lt main gt  x000D       lt p gt This is the content  Resize the viewport vertically to see how the footer behaves  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D       lt p gt This is the content  lt  p gt  x000D   lt  main gt  x000D   lt footer gt  x000D       lt p gt This is the footer  Resize the viewport horizontally to see how the height behaves when text wraps  lt  p gt  x000D       lt p gt This is the footer  lt  p gt  x000D   lt  footer gt  x000D   x000D   x000D       The units are vw   vh  vmax  vmin  Basically  each unit is equal to 1  of viewport size  So  as the viewport changes  the browser computes that value and adjusts accordingly    You may find more information here      Specifically   1vw  viewport width    1  of viewport width 1vh  viewport height    1  of viewport height 1vmin  viewport minimum    1vw or 1vh  whatever is smallest 1vmax  viewport minimum    1vw or 1vh  whatever is largest

User · Answer

Probably the shortest solution  works only in modern browsers  This small piece of CSS makes  quot the middle content part fill 100  of the space in between with the footer fixed to the bottom quot   html  body   height  100     your container   min-height  calc 100  - height of your footer      the only requirement is that you need to have a fixed height footer  For example for this layout       lt html gt  lt head gt  lt  head gt  lt body gt         lt main gt  your main content  lt  main gt         lt  footer gt  your footer content  lt  footer gt       lt  body gt  lt  html gt   you need this CSS      html  body   height  100         main   min-height  calc 100  - 2em         footer   height  2em

User · Answer

just share what i ve been used  and works nicely   content          height  auto          min-height 350px

User · Answer

As mentioned in Afshin Mehrabani s answer  you should set body and html s height to 100   but to get the footer there  calculate the height of the wrapper    pagewrapper     Firefox    height  -moz-calc 100  - 100px     assume i e  your header above the wrapper is 80 and the footer bellow is 20      WebKit    height  -webkit-calc 100  - 100px      Opera    height  -o-calc 100  - 100px      Standard    height  calc 100  - 100px

User · Answer

First you should create a div with id  footer  after your content div and then simply do this   Your HTML should look like this    lt html gt       lt body gt           lt div id  content  gt                           lt  div gt           lt div id  footer  gt  lt  div gt       lt  body gt   lt  html gt    And the CSS    html  body       height  100         content       height  100      footer       clear  both

User · Answer

kleolb02 s answer looks pretty good  another way would be a combination of the sticky footer and the min-height hack

User · Answer

For min-height to work correctly with percentages  while inheriting it s parent node min-height  the trick would be to set the parent node height to 1px and then the child s min-height will work correctly   Demo page

User · Answer

I agree with Levik as the parent container is set to 100  if you have sidebars and want them to fill the space to meet up with the footer you cannot set them to 100  because they will be 100 percent of the parent height as well which means that the footer ends up getting pushed down when using the clear function   Think of it this way if your header is say 50px height and your footer is 50px height and the content is just autofitted to the remaining space say 100px for example and the page container is 100  of this value its height will be 200px  Then when you set the sidebar height to 100  it is then 200px even though it is supposed to fit snug in between the header and footer  Instead it ends up being 50px   200px   50px so the page is now 300px because the sidebars are set to the same height as the page container  There will be a big white space in the contents of the page   I am using internet Explorer 9 and this is what I am getting as the effect when using this 100  method  I havent tried it in other browsers and I assume that it may work in some of the other options  but it will not be universal

User · Answer

Try this   body  height  100      content        min-height  500px      height  100      footer       height  100px      clear  both  important      The div element below the content div must have clear both

User · Answer

To set a custom height locked to somewhere     x000D   x000D  body  html   x000D    height  100   x000D    x000D   outerbox   x000D    width  100   x000D    position  absolute     to place it somewhere on the screen    x000D    top  130px             free space at top    x000D    bottom  0              makes it lock to the bottom    x000D    x000D   innerbox   x000D    width  100   x000D    position  absolute      x000D    min-height  100   important     browser fill    x000D    height  auto                   content fill    x000D    x000D   lt div id  outerbox  gt  x000D     lt div id  innerbox  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can try this  http   www monkey-business biz 88 horizontal-zentriertes-100-hohe-css-layout  That s 100  height and horizontal center

User · Answer

I am using the following one  CSS Layout - 100   height     Min-height      The  container element of this page has a min-height of 100   That   way  if the content requires more height than the viewport provides    the height of  content forces  container to become longer as well    Possible columns in  content can then be visualised with a background   image on  container  divs are not table cells  and you don t need  or   want  the physical elements to create such a visual effect  If you re   not yet convinced  think wobbly lines and gradients instead of   straight lines and simple color schemes        Relative positioning      Because  container has a relative position   footer will always remain   at its bottom  since the min-height mentioned above does not prevent    container from scaling  this will work even if  or rather especially when   content forces  container to become longer        Padding-bottom      Since it is no longer in the normal flow  padding-bottom of  content   now provides the space for the absolute  footer  This padding is   included in the scrolled height by default  so that the footer will   never overlap the above content       Scale the text size a bit or resize your browser window to test this   layout     html body       margin 0      padding 0      height 100      needed for container min-height        background gray       font-family arial sans-serif      font-size small      color  666     h1        font 1 5em georgia serif       margin 0 5em 0     h2       font 1 25em georgia serif       margin 0 0 0 5em        h1  h2  a           color orange         p        line-height 1 5       margin 0 0 1em     div container       position relative     needed for footer positioning       margin 0 auto     center  not in IE5        width 750px      background  f0f0f0       height auto  important     real browsers        height 100      IE6  treaded as min-height        min-height 100      real browsers       div header       padding 1em      background  ddd url     csslayout gif   98  10px no-repeat      border-bottom 6px double gray        div header p           font-style italic          font-size 1 1em          margin 0         div content       padding 1em 1em 5em     bottom padding for footer          div content p           text-align justify          padding 0 1em         div footer       position absolute      width 100       bottom 0     stick to bottom        background  ddd      border-top 6px double gray    div footer p       padding 1em      margin 0      Works fine for me

[html] 100% Min Height CSS layout

Examples related to html

Examples related to css

Examples related to xhtml