100% min-height viewport

HTML & CSS
1

Is it possible to achieve 100% min-height viewport using just CSS ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Full Viewport</title>
<style type="text/css">
* { margin:0; padding:0; }
html
{
    height:100%;
}
body
{
    height:100%;
    background-color:#f0f0f0;
}
#container
{
    min-height:100%;
    height:auto;
    position:relative;
    background-color:lightblue;
    padding:10px;
}
#main
{
    height:100%;
    background-color:lightyellow;
    border:1px solid red;
    padding:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/><br/>
</div>
</div>
</body>
</html>

Expected :

Got :

2

Here’s a detailed explanation of how to do it:

See if that makes sense, and come back with any questions. :wink:

3

Is it possible to achieve 100% min-height viewport using just CSS ?
Yes, but the FAQ link that ralph gave you will not explain how to get the 10px margin along with 100% height. You can’t have 100% height with 10px margins on the top and bottom without getting a premature scrollbar.

That will require two sandbag divs to fake the top and bottom margin/border.

Something like this will do what you are wanting.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>min-height:100% with margins</title>

<style type="text/css">

html,body {height:100%;}

body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
    background:#CDF;
}
/*=== Min-Height Bug Fixes (Do Not Alter These) ===*/
body:before {/*Opera min-height 100% bug*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#wrap:after { /* #wrap:after for IE8 min-height:100% bug*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8*/
    font-size:0;
}

/*=== Begin Layout ===*/
#top-cap { /*simulate 10px top margin and top border for #wrap*/
    position:relative;/*auto stack above #wrap*/
    height:10px;
    margin:0 10px -11px 10px;
    background:#CDF;
    border-bottom:1px solid red;
    overflow:hidden;
}
#wrap {
    min-height:100%; /*min-height on direct child of body*/
    margin:0 10px;
    background:#FFFFE0;
    border:1px solid red;
    border-width:0 1px;
}
* html #wrap {height:100%;} /*IE6*/

#main {
    width:100%;/*haslayout*/
    padding:11px 0; /*preserve space #top-cap and #bot-cap sandbag divs*/
}
#bot-cap {/*simulate 10px bottom margin and bottom border for #wrap*/
    height:10px;
    margin:-11px 10px 0;
    background:#CDF;
    border-top:1px solid red;
    overflow:hidden;
}
p {margin:10px;}

</style>

</head>
<body>

<div id="top-cap"></div>
<div id="wrap">
    <div id="main">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type 
        specimen book. It has survived not only five centuries, but also the leap into 
        electronic typesetting, remaining essentially unchanged. It was popularised in 
        the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
        and more recently with desktop publishing software like Aldus PageMaker 
        including versions of Lorem Ipsum.</p>
    </div>
</div>
<div id="bot-cap"></div>

</body>
</html>
4

Clever stuff, Rayzur. I confess I didn’t notice the border. Well done.

5

I confess I didn’t notice the border

That is what the 10px paddings were trying to do in anjanesh’s code.
I had done the same thing for someone else before so I knew what was needed. :slight_smile:

@anjanesh
Another problem with the code you were using was the height:100% and BG color on the #main div. It is nested in the min-height:100% container and min-height is not a defined height so it cannot be passed on to a child element. That is why we don’t even try to set a BG color on #main.

6

Hey, thanks rayzur.
I had nearly solved it using ugly margin-left and padding-left to hide the borders on the header and footer.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Full Viewport</title>
<style type="text/css">
* { margin:0; padding:0; }
html
{
    height:100%;
}
body
{
    height:100%;
    background-color:#CDF;
    padding-left:10px;
    padding-right:10px;
}
#container
{
    min-height:100%;
    height:auto;
    position:relative;
    background-color:lightyellow;
    border-left:1px solid red;
    border-right:1px solid red;
}

#header, #footer
{
    position:absolute;
    width:100%;
    height:10px;
    background-color:#CDF;
    border-left:0;
    border-right:0;
    margin-left:-1px;
    padding-left:2px;
}
#header
{
    border-bottom:1px solid red;
    background-color1:lightgreen;
}
#footer
{
    bottom:0;
    border-top:1px solid red;
}
#content
{
    padding:11px 10px 11px 10px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#content
{
    height:100%;
    padding-top:21px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="footer"></div>
</div>
</body>
</html>

I later realized header and footer dont need to be in a container div.

I was not targeting for IE6 users, but what bums me out is how the header and footer got 19px height instead of 10 inspite of margin:0 and padding:0 ?

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Full Viewport</title>
<style type="text/css">
* { margin:0; padding:0; }
body
{
    background-color:#CDF;
}
#header, #footer
{
    margin:0;
    padding:0;
    width:100%;
    height:10px;
}
#header
{
    background-color:green;
}
#footer
{
    background-color:red;
}
#content
{
    height:100px;
    background-color:lightyellow;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
7

I was not targeting for IE6 users, but what bums me out is how the header and footer got 19px height instead of 10 inspite of margin:0 and padding:0 ?

IE will expand an element to at least the current line-height/font-size unless you add overflow:hidden or set font-size to zero.


#header, #footer
{
    margin:0;
    padding:0;
    width:100&#37;;
    height:10px;
   [B]overflow:hidden;[/B]
}

Your IE6 rule is wrong and you should be targeting the container instead and lose the padding.


* html #container{height:100%}

Note that Rays solution above is much more robust and will work in all browsers and the one you should be going with :). Absolutely placing the footer is very fragile in IE and any dynamic action on the page that causes a reflow will cause the footer to be misplaced.