I am trying to get 2 nested page container div‘s to have a minimum height of the page. I was able to find this code with a single page container, but if I add another outer container, the logic falls apart.
Here is the html and css. (I want the blue and the red div‘s to be the same height. If the <div id='outer'> is removed, the red is what I want.)
<!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" xml:lang="en">
<head>
<title>CSS Layout - 100% height</title>
<style>
*
{
margin:0;
padding:0;
border:0;
}
html,body
{
height:100%;
background:gray;
}
div#container
{
position:relative;
margin:0 auto;
width:750px;
background:red;
height:auto !important;
height:100%;
min-height:100%;
}
div#outer
{
position:relative;
margin:0 auto;
width:800px;
background:blue;
height:auto !important;
height:100%;
min-height:100%;
}
div#header
{
background:#ddd
}
div#footer
{
position:absolute;
width:100%;
bottom:0;
background:#ddd;
}
</style>
</head>
<body>
<div id="outer">
<div id="container">
<div id="header">
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<div id="content">
<p>
Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here.
</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</div>
</body>
In searching for a result, it appears that this may not be possible because height:100% and min-height:100% only work on the first element after the body. Any suggestions on how to do this? Floating div‘s?
min-heightdoes not work on nested divs.