13

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

chross
  • 511
  • 2
  • 4
  • 13
  • basically height will keep stretching while you putting up other html,content in them. or r u planning to put "nothing" inside and still have height 100% ? – cjmling May 14 '14 at 10:30

5 Answers5

36

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

Pete
  • 57,112
  • 28
  • 117
  • 166
  • could also work by using %, Header 2%, Middle 96%, Bottom 2% – Engineeroholic Sep 07 '15 at 02:37
  • Thanks for your examples. However I have one question: In version 1 or 2, how can I make the container element also 100% in height. It only seems to change size by content, but I also need it to always be the full height. Can't seem to figure it out. – 5earch Nov 24 '15 at 09:17
  • @5earch unfortunately with the first 2 versions you wouldn't be able to have the container as 100% too as you would need the middle to have a height set instead of a min-height which would mean your layout would break. Any reason why you can't use flex: http://jsfiddle.net/tsao203b/? – Pete Nov 24 '15 at 10:15
  • From what I've seen flex is only supported in IE 10 and higher. We still have to support IE 9 though. Too bad there's no alternative, I guess I'll just have to do it without the footer than. Thanks anyways. – 5earch Nov 24 '15 at 12:01
  • @5earch What's the reason for both #middle and container being 100%? – Pete Nov 24 '15 at 12:33
  • Nevermind, you're right. I can just apply all the styles (background, width) to the outer div. That seems to work just fine. Thanks! – 5earch Nov 24 '15 at 13:43
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

AlexPrinceton
  • 1,173
  • 9
  • 12
2

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.

Arko Elsenaar
  • 1,689
  • 3
  • 18
  • 33
2

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

T J
  • 42,762
  • 13
  • 83
  • 138
-1

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 ?

Alok Jha
  • 562
  • 7
  • 22