No replies
matt.elkins's picture
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"
<html xmlns="" lang="en-gb">
	<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;
	<div id="main"></div>
	<div id="top"></div>
	<div id="bottom"></div>

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