CSS Single-column layout centered fixed-width 100%

Question

I've been recently looking into an CSS layout that will display a single centered column with fixed-width (min-width, expandable preferably) that occupied the whole height (minus header and footer).

Any suggestions for this? I have tried several approaches posted here on so but none meets my criteria. Also, I do not want to use JS for this, so it has to be pure CSS.

I'm no expert so I don't know which approach to take:

three columns with each side columns margin minus half of center column width together with a faux center column to stretch to 100% height? I somewhat dislike this idea because my side columns will have no content whatsoever

single column with margin 0 auto 0 auto to center it and top: xx px to make room for header? Then how do I stretch it to 100% height?

Any help highly appreciated.

Cheers, chross

Answer 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

Answer 2

If you want to do it through jQuery You can use Something Like this

window.onload = function() { 

var height = screen.height;
var ele = document.getElementById("yourblockid");
ele.style.height = screen.height-2 + "px";
};

This Script will put height equals the div height,

Is it helpful to you, or You are trying to Ask something else ?

Answer 3

You can make use of absolute positioning.

• Have an absolutely positioned container with top and bottom values equal to the height of header and footer respectively, this will stretch the container to remaining height

• Have an inline-block child inside having 100% height

• Apply text-align:center for the parent to align the inline-block child to center

HTML

<div id='container'>
 <div><div>
</div>

CSS

*{
 margin:0;
 padding:0;
}
html,body{
 height:100%;
 text-align:center;
}
#container{
 position:absolute;
 top:50px; /*height of header*/
 width:100%;
 bottom:50px; /*height of footer*/
 background:white;
 text-align:center;
}
#container div{
 display:inline-block;
 min-width:200px;
 height:100%;
 background:dodger blue;
}

JSFiddle Demo

Or if browser compatibility is not an issue, you can use css3 calc() function as another answer pointed out

Answer 4

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

Answer 5

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.