Dynamic height increase pops out of <div>

Forum Moderators: not2easy

Message Too Old, No Replies

Dynamic height increase pops out of <div>

kolea

7:05 am on Nov 30, 2008 (gmt 0)

Body height is 100%, #main is 100%. When I increase the page height beyond a certain point dynamically, the #main background color and border attributes end, resulting in a background color defined by the body.

birdbrain

2:22 pm on Nov 30, 2008 (gmt 0)

Hi there kolea,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
html,body {
 height:100%;
 margin:0;
 padding:0;
 background-color:#000;
 }
#main {[blue] 
 min-height:100%;[/blue]
 width:400px;
 margin:auto;
 background-color:#fff;
 border-right:1px solid #f00;
 border-left:1px solid #f00;
 }
#main p {
 margin:0;
 padding:10px 20px;
 }[blue]
</style>
<!--[if IE 6]>
<style type="text/css">
#main {
 height:100%;
 }
</style>
<![endif]-->[/blue]
</head>
<body>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p><p>
Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
</p>
</div>
</body>
</html>

birdbrain

kolea

5:26 pm on Nov 30, 2008 (gmt 0)

Yep, that's it! I figured it was something obvious - I'm completely self taught and learning this by what I call the sledge hammer method.

Aloha

birdbrain

5:42 pm on Nov 30, 2008 (gmt 0)

Hi there kolea,

I'm completely self taught and learning this by what I call the sledge hammer method

So am I but I used an entirely different method. ;)

I used the " Solving Problems At Divers Forums Method ". :)

birdbrain

kolea

7:59 pm on Nov 30, 2008 (gmt 0)

Aloha birdbrain!

Ha! That's great. I really want to thank you for the completely non-condescending advice - quite a bit of which I've seen elsewhere.

Mahalo,
kolea

birdbrain

8:03 pm on Nov 30, 2008 (gmt 0)

No problem, you're very welcome. ;)