Body Not Filling Screen Height? [Moved from CSS]

**alexjewell** · 01-03-2010, 06:39 PM

I'm attempting to change the body height depending on the space available, as <body> doesn't seem to be stretching all the way vertically when the content doesn't. The original question, posted in the CSS section, can be seen here: http://www.dynamicdrive.com/forums/s...ad.php?t=51264

Below is the JavaScript I whipped up to solve the problem, but it doesn't seem to be doing the trick. Any ideas?

Code:

function CSSCantDoThis() {
	
	var setOff = document.documentElement.offsetHeight;
	var clientBod = document.documentElement.clientHeight;

	var whichOneYo = Math.max(setOff,clientBod);

	var rockYoBody = document.body.style.height;

	if(whichOneYo == setOff){
		rockYoBody = setOff+"px";
	}

	else if(whichOneYo == clientBod){
		rockYoBody = clientBod+"px";
	}
}

**jscheuer1** · 01-03-2010, 09:14 PM

Change the body styles to:

Code:

body{
margin: 0px; 
padding: 0px;
background: #f7f6af no-repeat;
font-family: tahoma, arial, georgia, times;
font-size: 1em;
color: #1C2124;}

Use this script:

Code:

<script type="text/javascript">
(function(add, im, h, d, db, dbs, de, dr){
	function bg(dc){
		d = document; dc = d.compatMode; db = d.body; dbs = db.style;
		/*@cc_on @*/
		/*@if(@_jscript_version >= 5)
		dr = db.getBoundingClientRect;
		@end @*/
		de = dc && dc !== 'BackCompat'? d.documentElement : db;
		dbs.backgroundImage = 'url(' + im + ')';
		bgp();
	}
	function bgp(itp){
		itp = Math.max((dr? dr().bottom - dr().top : db.offsetHeight), de.clientHeight) - h;
		dbs.backgroundPosition = '0 ' + itp + 'px';	
	}
	add('load', bg); add('resize', bgp);
})((function(w){
	return w.addEventListener? function(ev, f){
		w.addEventListener(ev, f, false);
	} : w.attachEvent? function(ev, f){
		w.attachEvent('on' + ev, f);
	} : function(){return;};
})(window),
'imgs/bot1.gif', //set path to image
63 //set image height
);
</script>

You may want to reduce the bottom padding of some of the various divisions and set explicit top and bottom margins for p.

Non-javascript users will never see the background image. The rest will only see it in the desired position. The bit about getBoundingClientRect is to correct for IE zoom. IE 7 is a little buggy there still, not always firing onresize when the zoom changes. IE 8 is good. Other IE versions have no zoom.

**CCH** · 01-04-2010, 12:52 AM

I've found you can use the CSS property "height:100%" if the page has a declared doctype. Without a doctype, the 100% height doesn't seem to work on all tags.

**jscheuer1** · 01-05-2010, 06:27 AM

Here's a version that overcomes IE 7's inability to fire the resize event consistently when changing zoom percentages. It uses a poll specific to that browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title>alexjewell.com | About</title>

<meta name="keywords" content="design, web, alex, jewell, html, css, xhtml, cleveland, ohio, firm, standard, code, graphic, service" />
<meta name="description" content="Alex Jewell Design Services - servicing Cleveland with quality web design and consulting." />
<meta http-equiv="Content-Language" content="en" />
<meta name="robots" content="follow,index" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body{
margin: 0px; 
padding: 0px;
background: #f7f6af no-repeat;
font-family: tahoma, arial, georgia, times;
font-size: 100%;
color: #1c2124;
position: relative;
z-index: 10}

.imgload{
width: 1px;
height: 1px;
display: none;
visibility: hidden;}

#container{
width: 100%;
height: auto;
background: transparent url(imgs/bg.gif) repeat-x top center;
padding-bottom: 2em;}

#top{
width: 799px;
height: 126px;
background: transparent url(imgs/top1.gif) no-repeat top left;}

#cn{
width: 776px; 
height: 110px;
background: transparent url(imgs/cone.jpg) no-repeat top left;
padding: 0px 0px 0px 170px;}

	#cn a img{
	display: block;
	float: left;
	height: 44px;
	border: 0px;
	margin: 0px;}
	
#cont{
width: 100%;
height: auto;
background: transparent;
margin-bottom: 2em;}

#home_cont{
width: 60%;
min-height: 338px;
height: auto;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 50px;}

	#home_cont h1{
	padding-top: 0px;}
	
#services{
width: 775px;
height: 265px;
text-align: center;
margin: 50px 0px 0px 25px;}

	.sspacer{
	width: 775px;
	height: 1px;
	clear: both;}

	#services a{
	display: block;
	float: left;
	width: 204px;
	height: 238px;
	margin: 0px 10px 0px 0px;
	background: transparent url(imgs/woodpanel.jpg) no-repeat center center;}
	
		#services a:hover{
		background: transparent url(imgs/woodpanel_over.jpg) no-repeat center center;}
	
		#services a img{
		width: 204px;
		height: 238px;
		border: 0px;
		display: block;
		margin: 0px;}
		
		#services span{
		font-size: 2em;
		font-weight: bold;
		display: block;
		width: 775px;
		text-align: left;
		margin-bottom: 10px;}
		
#port{
width: 775px;
height: auto;
margin: 30px 0px 0px 25px;}

#gal{
width: 100%;
height: auto;
text-align: center;}

	#gal2{
	width: 606px;
	height: 606px;
	margin: 0px auto;
	background: #333;
	padding: 4px 0px 3px 0px;
	text-align: center;}

	#gal2 object, #gal2 embed{
	display: block;
	margin: 0px auto;
	width: 600px;
	height: 600px;}
	
	#gal h1, #form h1{
	letter-spacing: 5px;}
	
	#gal span{
	font-style: italic;
	letter-spacing: 2px;
	font-size: 0.9em;}
	
	#gal p{
	width: 700px;
	margin: 0px auto;}
	
	#actualFlash{
	width: 600px;
	height: 600px;
	overflow: hidden;}
	
#form{
width: 90%;
height: auto;
margin: 0px 0px 0px 20px;}

	#form object, #form embed{
	display: block;}
	
	#form p{
	margin: 0px;
	padding: 0px;
	position: relative;
	bottom: 10px;
	right: 0px;
	letter-spacing: 2px;
	text-indent: 10px;}
	
	#form ul{
	color: #D62822;}
	
		#form ul span{
		color: #333;}
		
#blanket{
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
-moz-opacity:0.65;
-khtml-opacity: 0.65;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;}

#pack, #extras, #custom{
position:absolute;
background-color: #fff;
width:425px;
height:335px;
z-index: 9002;
border: 2px solid black;
padding: 10px;
overflow: scroll;}

	#pack span, #extras span, #custom span{
	display: block;}

	#pack span b, #extras span b, #custom span b{
	font-size: 1.8em;}
	
	#pack span a, #extras span a, #custom span a{
	color: #D62822;
	font-weight: bold;
	font-size: 1em !important;
	letter-spacing: 3px;}
	
	#pack ul{
	list-style-type: none;
	list-style-position: inside;
	margin-left: 2px;
	padding-left: 2px;}
	
	#pack ul ul{
	list-style-position: outside;
	list-style-type: square;
	margin: 6px 0px 0px 35px;}
	
	#pack ul li.topLevel{
	margin: 0px 0px 10px 0px;
	padding: 2px;
	background: #eee;}
	
	#pack ul li.topLevel strong{
	margin: 0px 0px 0px 3px;
	letter-spacing: 2px;}
	
	#pack ul li ul li{
	margin-bottom: 5px;}
	
	#extras ul{
	list-style-type: square;}
	
	#extras ul li{
	margin-bottom: 10px;}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="popUpJack.js"></script>
<script type="text/javascript">
(function(add, im, h, d, db, dbs, de, dr){
	/*@cc_on @*/
	/*@if(@_jscript_version >= 5)
		function checkResize(){
			if(checkResize.saved && checkResize.saved !== dr().bottom){
				bgp();
				dbs.backgroundImage = 'url(' + im + ')';
			}
			checkResize.saved = dr().bottom;
		}
	@end @*/
	function bg(dc){
		d = document; dc = d.compatMode; db = d.body; dbs = db.style;
		/*@if(@_jscript_version >= 5)
		dr = db.getBoundingClientRect;
		if(/MSIE 7/.test(navigator.appVersion)){
			setInterval(checkResize, 100);
		}
		@end @*/
		de = dc && dc !== 'BackCompat'? d.documentElement : db;
		dbs.backgroundImage = 'url(' + im + ')';
		bgp();
	}
	function bgp(itp){
		itp = Math.max((dr? dr().bottom - dr().top : db.offsetHeight), de.clientHeight) - h;
		dbs.backgroundPosition = '0 ' + itp + 'px';	
	}
	add('load', bg); add('resize', bgp);
})((function(w){
	return w.addEventListener? function(ev, f){
		w.addEventListener(ev, f, false);
	} : w.attachEvent? function(ev, f){
		w.attachEvent('on' + ev, f);
	} : function(){return;};
})(window),
'imgs/bot1.gif', //set path to image
63 //set image height
);
</script>
</head>
<body>

<div id="container">
<div id="top"></div>
<div id="cn">
	<a href="index.php">
		<img src="imgs/about.gif" alt="About" />
	</a>
	<a href="index.php?spoons=services">
		<img src="imgs/services.gif" alt="Services" />
	</a>
	<a href="index.php?spoons=portfolio">
		<img src="imgs/port.gif" alt="Portfolio" />
	</a>
	<a href="index.php?spoons=contact">
		<img src="imgs/contact.gif" alt="Contact" />
	</a>
</div>
<div id="cont">

	<div id="home_cont">
		<h1>&nbsp;I'm finding simplicity in an orbit of chaos.</h1>
		<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'm finding love in a beatless society.</h3>
		<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It's all in the journey, not in the past.</h2>
		<h4>&nbsp;&nbsp;It's all about motion and movement - change is inevitable, but your reaction to it is not.</h4>
		<p>My name is <b>Alex Jewell</b> and I <b>create</b>. Some observe and others ignore the <b>beauty</b> of the world around us. They are either <b>awed</b> or intimidated by <b>color</b>, <b>shape</b>, and <b>form</b>. 
			These, however, are my <b>domain</b>. My job is to present <b>content</b> in a way that will both <b>appeal visually</b> and support the theme(s) adequately. Through <b>challenge</b>, I thrive. 
			Through <b>art</b>, I deliver. Through writing, I <b>speak</b>.</p>
		<p>If you are interested in hiring me to create for you, take a look around; visit the services and portfolio pages to see exactly what the story is behind my statements, then decide
			if you wish to entrust your <b>vision</b> in my hands. I'm here to translate that vision into something <b>powerful</b> and <b>relevant</b>. Let me do it.</p>
		<p>Thanks.</p>
	</div>


</div>
</div>

</body>
</html>

**alexjewell** · 01-07-2010, 10:04 PM

Works great! Thanks so much. Is there a way I could have the background show up even if javascript isn't enabled?

**jscheuer1** · 01-08-2010, 06:11 AM

Well, then you would be running into the same problem as you had before. There is no ideal solution to this without javascript. If your page were to be in quirks mode, it might be possible. Also I hear that there is a way using a table that might work. If you were to do either of these two things and they worked, you could dispense with the javascript. But neither of these solutions, as I say, is really ideal. The table goes against best practices (potentially creating more problems than it solves) and the code required to make it work might be technically invalid. Using quirks mode produces invalid markup that is less likely to be future proof than a valid page would be.

One standard/best practices alternative for non-javascript folks would be to place the image in a division inside noscript tags:

Code:

 . . . ish to entrust your <b>vision</b> in my hands. I'm here to translate that vision into something <b>powerful</b> and <b>relevant</b>. Let me do it.</p>
		<p>Thanks.</p>
	</div>


</div>
</div>
<noscript>
<div>
<img src="imgs/bot1.gif" width="224" height="63" alt="&copy; 2010 alexjewell" title="">
</div>
</noscript>
</body>
</html>

It would rarely align with the bottom of the window, simply always appear just a bit below the rest of the content on the page.

There may be other standards compliant ways of dealing with it for the non-javascript enabled user. That's the only one that springs to mind at the moment.

If you are overly worried about your copyright notice, original web content is presumed to be copyright just by virtue of being published. A notice to that effect only helps keep honest people honest. The best protection is to keep copies of the material on CD's or even in written or printed form that you mail to yourself. Don't open the envelope unless and until the need arises and you are in court. The postmark will verify the date of origin.

**alexjewell** · 01-08-2010, 02:54 PM

Yeah, I know the JavaScript is necessary. And, I know the copyright notice is pretty much pointless - it's pretty much a design element lol

Is it possible to include <noscript> sections in <head>? For example, to include a CSS file when JavaScript isn't enabled?

**jscheuer1** · 01-08-2010, 04:35 PM

That will work, but is considered invalid by the validator. You can do it the other way around though. You can use javascript to write out (or insert via the DOM) a stylesheet link that will then of course only gets used by javascript enabled browsers.

Did you have something specific in mind?