CSS: 100% Div height in Firefox and IE

To make a div fill the height of the browser in firefox and IE, all parent containers must also have 100% height (including the body container). Firefox differs slightly from IE, in that if the div is contained in a form (which is normally the case if developing an asp.net application), the form also needs to have 100% height. The following example demonstrates a simple centered layout with 100% browser height:
Note that the main content div has min height specified. This is so that the div background expands correctly in firefox etc if the content is higher than the browser height.

<title>Rob Nowik centered full height example layout</title>
  <style type="text/css">
    body, form
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        width: 400px;
        margin: 0 auto;
        background-color: #BBB;
        text-align: left;
  <form action="blah.aspx">
    <div id="mydiv">Hello world</div>

You May Also Like

About the Author: rnowik

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.