Menu
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
495
One column layout Columns give you the chance to split your pages and display content in an appealing way. A one, or single, column layout is a great approach for a text-heavy page and/or when you want to add a small image like an author headshot, a logo, or a simple graphic to lend context to a paragraph of text.
Multiple-column layout is closely related to Paged Media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore, the properties now defined in the CSS Fragmentation specification are required to control how content breaks between columns.
The column-rule shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
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
90
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
35
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
