100% Min Height CSS layout

170

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 ?

This question is tagged with html css xhtml

~ Asked on 2008-08-24 17:59:04

13 Answers


116

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.

~ Answered on 2008-08-24 18:12:21


30

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_
<div id="outerbox">_x000D_
  <div id="innerbox"></div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

~ Answered on 2011-03-30 12:06:56


24

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_
<main>_x000D_
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
    <p>This is the content.</p>_x000D_
</main>_x000D_
<footer>_x000D_
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>_x000D_
    <p>This is the footer.</p>_x000D_
</footer>
_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

~ Answered on 2015-08-15 17:40:57


15

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

~ Answered on 2008-08-27 18:29:38


6

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

~ Answered on 2013-08-28 11:33:22


6

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 <div> 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:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

~ Answered on 2008-09-03 23:41:08


3

First you should create a div with id='footer' after your content div and then simply do this.

Your HTML should look like this:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

And the CSS:

?html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

~ Answered on 2012-10-12 09:45:50


3

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.

~ Answered on 2012-04-18 05:07:53


2

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.

~ Answered on 2010-04-21 16:09:51


2

Probably the shortest solution (works only in modern browsers)

This small piece of CSS makes "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

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:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

you need this CSS:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

~ Answered on 2013-09-20 14:15:53


1

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

~ Answered on 2010-01-07 07:49:03


0

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);
}

~ Answered on 2014-01-12 20:03:57


0

just share what i've been used, and works nicely

#content{
        height: auto;
        min-height:350px;
}

~ Answered on 2011-07-29 07:44:23


Most Viewed Questions: