View Full Version : 100% height css issues

02-06-2012, 10: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:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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;}
<div id="Wrap">

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

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?

02-07-2012, 12:22 AM
How about giving the html and body a min-height:100%?

02-07-2012, 04:40 AM
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?

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

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