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.

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>