CSS Single-column layout centered fixed-width 100% height w header and footer

Solution 1:

Update

Simple way to do it for modern browsers (2015) using display:flex:

html, 
body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>

The above allows for both fixed height header and footer (just add a height to the styles) as well as variable height (as shown currently - can change depending on the content of header and footer) with the content taking up the rest of the space.

If the content is longer than the document, the footer will be pushed down.

Old post:

There are a few ways to do this with pure css. Basically you need to start off with the html structure like this:

<div id="wrapper">
    <div class="top"></div>
    <div class="middle">
        <div class="container">
        </div>
    </div>
    <div class="bottom"></div>
</div>

Version 1 uses border-box so won't be compatible with older browsers (and you may need to add the moz, webkit and ms prefixes to get it working across all browsers):

html,
body { height: 100%; margin: 0; padding: 0; }
#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }
.middle { min-height: 100%; position: relative; }
.top { margin-top: -100px; height: 100px; }
.bottom { margin-bottom: -75px; height: 75px; }
.container { padding: 10px; }

Version 1
Version 1 with content
Version 1 centred column

Version 2 uses absolute positioning and is a bit more cross browser friendly:

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
.middle {min-height:100%;}
.top {margin-top:-50px; height:50px;}
.bottom {margin-bottom:-50px; height:50px;}
.container {padding:10px;}

Version 2
Version 2 with content
Version 2 centred column

Version 3 changes the html slightly but is more robust for if you have variable height header and footer:

<div id="wrapper">
    <div class="table">
        <div class="top row"><div class="cell"></div></div>
        <div class="middle row"><div class="container cell"></div></div>
        <div class="bottom row"><div class="cell"></div></div>
    </div>
</div>

Css

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}

.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}

.middle {height:100%;}
.container {padding:10px;}

Version 3
Version 3 with different height header and footer
Version 3 with content
Version 3 centred column

Solution 2:

Hm I am very surprised that anybody doesnt know how to solve it with pure CSS and good browser support (without any calc () - it is good method but it is really early to use it)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Content</title>
    <link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
    <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->
</head>
<body>
<div id="wrapper">
    <div class="w1">
        <div class="w2">
            <p>content of the page</p>
        </div>
    </div>
    <div id="footer">
        <div class="holder">
            <div class="frame"> 
                <p>footer content</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

html{height:100%;}
body{
    margin:0;
    height:100%;
    text-align:center;
}
p{margin:0 0 10px;}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
.w1{
    width:100%;
    display:table-row;
    background:#0ff;
}
#header {background: #ccc;}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
}
#footer .holder{
    height:1%;
    display:table-row;
    background:#f00;
}
#footer .frame{display:table-cell;}

So I created Fiddle

Solution 3:

The only way to do this with pure css is using the css calc() function:

#content {
     height:calc(100% - 250px);
}

Where 250px is the height of your header+footer combined.

CSS Single-column layout centered fixed-width 100% height w header and footer

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts