PDA

Click to See Complete Forum and Search --> : Scaling a DIV from top to bottom

hannuo
05-15-2004, 08:48 AM
I've been working on a website for a Finnish band on my free time and I'm struggling with code incompatibility between browsers. The site has a centered DIV featuring all the content and it should scale 100% from top to bottom at all times even if there's no content at all. I tried to do this by putting BODY width and height and DIV height to 100%, and it works ok in IE but NS stops the scaling at the point where the content ends. I also tried to put the DIV height to auto and min-height to 100% but there was no difference whatsoever. Any hints?

I put up some screenshots to describe the problem better (excuse me for the poor quality but I had to keep the size reasonable):

IE (good): http://www.saturalanx.com/temp/ie.jpg
NS (bad): http://www.saturalanx.com/temp/ns.jpg

And here's also the CSS file for the site:


body {
background-color: #333333;
background-image: url(../images/bg.gif);
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 100%;
}

.d1 {
background-color: #cc0000;
border-width:0;
padding:0;
margin:0;
width: 550px;
height: 100%;
margin-left: auto;
margin-right: auto;
}

div[class="d1"]
{
height: auto !important;
min-height: 100%;
}


Any help is highly appreciated, cheers!
soccer362001
05-15-2004, 09:27 AM
The only way I can think of doing that would be to nest <div>'s
Fang
05-15-2004, 09:45 AM
body, html {
/* definitions */
}
David Harrison
05-15-2004, 09:55 AM
The height af an element depends upon what you put in it, if you set height:100% it will expand to 100% of the height of it's containing element.
Setting the body height to 100% does nothing because there is no containing element (apart from <html>), therefore the body should only expand to as tall as it needs to be, which is determined by the content inside it.

IE is messing up and you are assuming that it's doing something right, so actually it's IE bad, NS good.

You can acheive the effect you want by using the "Faux Columns (http://alistapart.com/articles/fauxcolumns/)" technique.