DIV in DIV - both 100% height

HTML & CSS
1

Hi community,

I’ve got a strange problem: The content DIV is wrapped by an DIV with 100% width.

The wrapper works fine and fills the whole browser height but the content DIV just wants to go as high as the content is. It’s getting me sick…

Does anybody have a hint ?

Here’s the simplified code:

<style type=“text/css”>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
div#wrapper {
background: #eee;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
width: 950px;
}
div#page {
background: #fff;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
width: 850px;
}
</style>
</head>
<body>
<div id=“wrapper”>
<div id=“page”>
Menu | Content
</div>
</div>

Thanks.
Ralf

2

Hi, thanks. That would work, but breaks if the text is longer than the browser height. A scrollbar is shows but when you scroll down, the wrapper stops at 100%.

3

That’s the way it’s supposed to work based on the information in your original post.

If you have a different scenario, then you need to explain the details of what that scenario is and what the desired outcome is.

4

Try this

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"> 
* { 
margin: 0; 
padding: 0; 
} 

html, body { 
height: 100%; 
} 

div#wrapper { 
background: black; 
border: 1px solid red; 
height: 100%; 
margin: 0 auto; 
width: 950px; 
} 

div#page { 
background: white; 
border: 1px solid blue; 
height: 100%; 
margin: 0 auto; 
width: 850px; 
} 

</style> 
</head> 
<body> 

 <div id="wrapper"> 
         <div id="page">
                Menu | Content
         </div> 
 </div>
 
</body>
</html>
5

Hi, you need to repeat y a background image on the container. Or drop in another div to hold the background color. Give the div position absolute and top/bottom 0

6

Hi,

Please read the CSS faq on 100% height before attempting this as you cannot nest multiple 100% high elements and you cannot base height on an element that has min-height either.

(BTW don’t use the important hack for 100% height either as IE7 breaks badly with it. Just use the star selector hack for iE6 instead It’s less code and 100% safe. :))

You can only ever have one 100% high element in your page and that is the first min-height:100% element (#wrapper in your case). You have one shot at creating 100% high effects and they must all be done on this element.

You can as Eric suggests repeat a background image on #wrapper to give you the faux column 100% high effect.

In your original example if you are just looking for gray borders then do it all in one div and use borders for the outer colour.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#wrapper {
    background: #fff;
    min-height: 100%;
    margin: 0 auto;
    width: 850px;
    border-right:50px solid #eee;
    border-left:50px solid #eee;
}
* html #wrapper {
    height:100%
}
</style>
</head>
<body>
<div id="wrapper"> Menu | Content </div>
</body>
</html>

There are other methods of creating 100% backgrounds but are a little complicated.

(Also don’t call everything div#wrapper, div#page as Ids are unique and that’s just a waste of code. Just use #wrapper and #page etc as it is unlikely that you want to isolate the id by its type selector anyway.)