0

I have a fixed width layout where I'm displaying the header and footer at 100% width and my content in the center is fixed at 960px wide. I'd like to make the center content fill the screen even when there isn't enough content to do it. You can view the site at http://www.gaso-wheatley.com/ and here's the relevant code:

HTML:

<body>		
	<div id="wrapper">
		<div id="headerbg">
			<div id="header">
				<div id="headerlogo">
				</div>
				<div id="headertext">
				</div>
			</div>
		</div>
		<div id="contentwrapper">
			<div id="content">						
			</div>
			<div class="push">
			</div>
		</div> <!-- contentwrapper -->
	</div> <!-- wrapper -->
		
	<div id="footer">
		<div id="footertext">
		</div>
	</div> <!-- footer -->			
</body>

CSS:

html {
	height: 100%;

}

body{
	margin:0;
	padding: 0;
	height: 100%;
}


#wrapper{
	display: block;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px;
}

#headerbg {
	width: 100%;
	height: 131px;
}

#header {
	width: 960px;
	height: 131px;
	top: -131px;
	margin: 0px auto;
}

#headerlogo {
	display: inline;
	float: left;
	width: 235px;
	height: 100px;
	margin: 0px;
	padding: 0px;
}

#headertext{
	padding-top: 16px;
	display: inline;
	float: right;
	height:50px;
	width:220px;
}

#contentwrapper {
	margin: 0px auto;
	width: 960px;
	height: 100%;
	min-height: 100%;
}

#content{
	margin: 0;
	width: 940px;
	padding: 10px;
}

.push {
	height: 50px;
}

#footer{
	display: block;
	width: 100%;
	height: 50px;
}

#footertext {
	width: 960px;
	height: 34px;
	padding-top: 16px;
	margin: 0px auto;
}
2
Contributors
1
Reply
3
Views
7 Years
Discussion Span
Last Post by Phaelax
0

Based off the code I found here, http://www.webdeveloper.com/forum/showthread.php?t=52083, and a few other additions, I came up with something for you. The general conclusion I saw to this problem was that it has to be done using javascript.

I've tested the code in the latest version of Chrome (4.0.266) and FF 3.5 and it looks fine. Although, in FF it seemed a little choppy when resizing the window. IE 6, however, didn't really seem to like anything. So for now, I can't say this is an absolute solution, but it's something.

<!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> 
	<script type="text/javascript">
		function getHeight(){
			var height = 0;
			if (typeof(window.innerHeight == 'number')){
				height = window.innerHeight;
			}else{ 
				if (document.documentElement && document.documentElement.clientHeight){
					height = document.documentElement.clientHeight;
				}else{
					if (document.body && document.body.clientHeight){
						height = document.body.clientHeight;
					}
				}			
			}
			return height;
		}
		
		function revalidateContentHeight(){			
			height = getHeight();
			if (height > 0){
				var headerHeight = (document.getElementById('headerContainer')).offsetHeight;
				var footerHeight = (document.getElementById('footerContainer')).offsetHeight;
				var scrollHeight = (document.getElementById('contentContainer')).scrollHeight;
				var realHeight = Math.max(height, scrollHeight) - headerHeight - footerHeight;
				
				(document.getElementById('contentContainer')).style.height = (height-headerHeight-footerHeight+window.pageYOffset) + 'px';
				
			}
		}
	
		window.onload = function(){
			revalidateContentHeight();
		}
		window.onresize = function(){
			revalidateContentHeight();
		}
		window.onscroll = function(){
			revalidateContentHeight();
		}
	</script>
		
	<style type="text/css">
		body{margin:0;}


		#headerContainer{width:100%;background-color:yellow;height:130px;}
		#contentContainer{width:960px;text-align:left;background-color:blue;}
		#footerContainer{width:100%;position:fixed;clear:both;bottom:0px;height:50px;background-color:red;}

		.padBlock{padding:10px;}

		#footertext{width:960px;height: 34px;padding-top: 16px;margin: 0px auto;}

	</style>
		
</head> 
 
 
<body>
	<center>
	
	<div id="headerContainer">
		
	</div>
	
	<div id="contentContainer">
		<div class="padBlock">
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			<br/><br/><br/><br/><br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			<br/><br/><br/><br/><br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			<br/><br/><br/><br/><br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			<br/><br/><br/><br/><br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			<br/><br/><br/><br/><br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>
			<br/><br/><br/><br/><br/>
			blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br/>

		</div>
	</div>
	
	<div id="footerContainer"> 
		<div id="footertext">			
			<a href="http://www.powerzoneequipment.com" target="_blank">&copy; 2009 Power Zone Equipment, Inc.</a><br /> 
		</div> 
	</div>
 
 </center>
</body> 
</html>

Edited by Phaelax: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.