Best IT Recipes

CSS One-column layout with a fixed width of 100% height w header and footer

I recently looked at a CSS layout that would display a single centered column with a fixed width (minimum width, expandable preferably) that occupied the entire height (minus the header and footer).

Any suggestions for this? I have tried several approaches posted here, therefore, but no one meets my criteria. Also, I don't want to use JS for this, so it should be pure CSS.

I am not an expert, so I do not know which approach to take:

three columns marked each side column minus half the center width of the column along with the faux center column to stretch to 100% height? I do not like this idea a little, because my side columns will not have any content

one column with field 0 auto 0 auto to center it and above: xx px to make room for the header? Then how to stretch it to 100% height?

Any help was greatly appreciated.

Cheers chross

+5
html css css3
May 14 '14 at 10:23
source share
5 answers

Update

An easy way to do this for modern browsers (2015) with 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 both a fixed height for the header and footer (just add height to the styles) and a variable height (as shown currently - may vary depending on the contents of the header and footer), while the content takes up the rest of the space.

If the content is larger than the document, the footer will be moved down.

Old post:

There are several ways to do this using pure css. Basically you need to start with the html structure as follows:

 <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 it will not be compatible with older browsers (and you may need to add moz, webkit and ms prefixes to make them work in 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
Vertical column version 1

Version 2 uses absolute positioning and is a bit more 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
Vertical column version 2

Version 3 changes html slightly, but is more reliable if you have variable headers and footers:

 <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 headers and footers
Version 3 with content
Center column version 3

+20
May 14 '14 at 14:09
source share

I am very surprised that no one knows how to solve it with pure CSS and good browser support (without any calc () - this is a good method, but in fact it is very early to use)

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

+4
May 14 '14 at 10:53
source share

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

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

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

+2
May 14 '14 at 10:26
source share

You can use absolute positioning.

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

  • The inline-block child has 100% height inside

  • Apply text-align:center for the parent to align the inline-block child with the 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 a problem, you can use the css3 calc() function as another answer marked

+2
May 14 '14 at 10:37
source share

If you want to do this 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 set the height equal to the height of the div,

Is this useful for you, or are you trying to ask something else?

-one
May 14 '14 at 10:33
source share


More articles:


All Articles