100% height in CSS?

rustyofco · 11-03-2008, 02: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, 02: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, 02:26 AM

No link, sorry

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

Code:

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

Code:

.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, 02: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

Code:

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

Code:

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

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

rustyofco · 11-03-2008, 02: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, 02: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, 02: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, 03:00 AM

Oh, I'm following you now. I had that same exact problem. Sorta.... http://http://www.codingforums.com/s...d.php?t=151390

Use height: auto;

itsallkizza · 11-03-2008, 03:07 AM

http://www.codingforums.com/s...d.php?t=151390

_Aerospace_Eng_ · 11-03-2008, 04:53 AM

Code:

<!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>