...

View Full Version : 100% height in CSS?



rustyofco
11-03-2008, 03:15 AM
I have a div just inside my body. That div has a bg image. But the extent of the div depends on what's in the div. The problem is that sometimes if there is not much stuff in that div, the background will not reach the bottom of the window. How do I make sure that the div's bg will always reach the bottom of the window?

(The reason im doing the bg in the div and not in body is because i already have a bg in body and the div bg is a transparent tile.)

GardenGnome2
11-03-2008, 03:20 AM
Can we see a code or a link to help you?

I'm not sure I really understand your first part.

rustyofco
11-03-2008, 03:26 AM
No link, sorry :p

And the code is messy so i'll reproduce a simplified version here:



<body>
<div class="maindiv">
not very much content in here.
</div>
</body>




.maindiv{
background: url('bg2.gif') repeat;
width: 100%;
}

body {
background: url('bg1.gif') repeat;
}


The problem is that since there is not much content in the div, the div's height will be less than the browser window's height. Therefore, the background (bg2.gif) will not tile all teh way down to the bottom of the window. But I need it to.

GardenGnome2
11-03-2008, 03:34 AM
Seems to me that you could just set the width and height, instead of 100% to whatever you want. For example, if the image is 50px by 50px and you want it to repeat like 2 times, just set the width to 100 and the height to 50


<body>
<div class="maindiv">
not very much content in here.
</div>
</body>


.maindiv{
background: url('bg2.gif') repeat;
width: 100;
height: 50;
}

body {
background: url('bg1.gif') repeat;
}

rustyofco
11-03-2008, 03:37 AM
I cant do that. I want the div to fill up the window. I cant leave the height defined. If it's too low, then if there is a lot of content in the div, the contents will spill out of the bg. Also, if the user's window is very tall, the bg will not stretch all the way down.

On the other hand, if i set the height too big, if there is not a lot of content in hte div, there will be useless vertical scrolling.

The content in the div is dynamic btw.

GardenGnome2
11-03-2008, 03:52 AM
First let me get something straight. The bg image is repeated. So won't the bg image always reach the bottom of the div anyway?

rustyofco
11-03-2008, 03:54 AM
It'll reach the bottom of the DIV but not necessarily the bottom of the WINDOW. I need it to fill the window.

GardenGnome2
11-03-2008, 04:00 AM
Oh, I'm following you now. I had that same exact problem. Sorta.... http://http://www.codingforums.com/showthread.php?t=151390

Use height: auto;

itsallkizza
11-03-2008, 04:07 AM
http://www.codingforums.com/s...d.php?t=151390

_Aerospace_Eng_
11-03-2008, 05:53 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>100% Height</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
background: #FFF url(bg1.gif);
}
.maindiv {
background: url(bg2.gif);
min-height:100%;
}
* html .maindiv { /* this is needed to fake min-height in IE 6 */
height:100%;
}
</style>
</head>
<body>
<div class="maindiv"> not very much content in here. </div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum