100% height css issues

yanksno1 · 02-06-2012, 09:00 PM

I think I'm missing something simple here. I'm trying to have a fluid background in height, but the html and body tags get cut off at the 100% height of the screen. Here's the code I'm trying to use:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
* {padding: 0;margin: 0;}
html, body {height: 100%;}
body {background: #fff url(images/bg.gif) top left repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; position: relative;}
#Wrap {background: url(images/bg_wrap.png) top left repeat-y; width: 896px; min-height: 100%; height: auto !important; height: 100%; padding: 0px 6px 0 4px; margin: 0 auto; overflow: hidden; _overflow: visible;}
#btmWrap {background: url(images/bg_btm.png) bottom left repeat-x; width: 100%; height: 1596px; position: absolute; bottom: 0; left: 0; z-index: -10;}
#characters {background: url(images/bg_characters.png) bottom center no-repeat; width: 100%; height: 725px; position: absolute; bottom: 0; left: 0; z-index: -15;}
</style>
</head>
<body>
<div id="Wrap">

</div>
<div id="btmWrap">
  <div id="characters"></div>
</div>
</body>
</html>

Now I want the #Wrap div to span across 100% height and expand if the content is higher while the html/body tags expand as well. Am I missing something or this can't be done?

Frankie · 02-06-2012, 11:22 PM

How about giving the html and body a min-height:100%?

yanksno1 · 02-07-2012, 03:40 AM

Quote:

Originally Posted by Frankie

How about giving the html and body a min-height:100%?

Tried that. That worked for the backgrounds, but would take the 100% height off the #Wrap container div. Any other suggestions?

Frankie · 02-07-2012, 02:45 PM

I thought that would be a quick fix, but now that it isn't, the only thing I can suggest is to go through the third tutorial on my signature page. That covers all types of 100% height, not just a sticky footer.

Sammy12 · 02-07-2012, 10:59 PM

You are using position: absolute; which is not considered content. Therefore you essentially have nothing on the page. The height is 100%, because you set it to that in your css. The other heights ( with position: absolute; ) mean nothing to the body tag. Try taking out all the position: absolute; out, you shouldn't have to use it anyways.