• Locked
No replies
Sat, 2010-02-27 14:49
matt.elkins
matt.elkins's picture
Offline
newbie
Last seen: 12 years 24 weeks ago
Joined: 2010-02-25
Posts: 1
Points: 2

I'm looking for a bit of a help with a 100% height problem. I've spent quite a while attempting to find a pure CSS solution, which is supported by the full range of popular browsers (IE6+, FF2+, Safari 3+, Opera 9+, Google Chrome). My personal opinion is that I can't achieve what I'd like to do with CSS alone, but before implementing a CSS/JavaScript solution using jQuery, I thought I'd seek some advice from the experts!

I've included the XHTML and CSS that I've been using to try and find a solution to this problem below:

<!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" lang="en-gb">
 
<head>
 
	<title>100% Height</title>
 
	<style type="text/css">
		body {
			padding: 0;
			border: 0;
			margin: 0;
		}
 
		#top {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100px;
			background: lightblue;
		}
 
		#bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 125px;
			background: darkblue;
		}
	</style>
 
</head>
 
<body>
 
	<div id="main"></div>
 
	<div id="top"></div>
 
	<div id="bottom"></div>
 
</body>
 
</html>

What I'd like to achieve is to have the #main DIV positioned between the #top and #bottom DIVs, filling the available space at all times (i.e. 100% width and height) regardless of viewport dimensions, screen resolution, etc. I'm intending on putting a scalable Flash movie also set to 100% width and height within the #main DIV.

I'd greatly appreciate any suggestions or advice! I'm happy to provide more information if clarification is needed in order to help find a solution.

Many thanks in advance! Smile

Top
Tags: