100% height conundrum - pure CSS solution?

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>

	<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! :slight_smile:

Hi, If you want 100% outer container, then first you need a sticky footer type setup. http://www.visibilityinherit.com/code/sticky-footer-demo.php

Next, you want the center column to go to the bottom. The easiest way to do this is to just fake it with a repeating image on the wrapper (the outer container).

Alternatively, you can fake it using AP like this http://www.visibilityinherit.com/code/eqaul-height-columns-withcss.php

…or with JS (non-jquery) http://www.visibilityinherit.com/code/eqaul-height-columns.php

Opps! Looking at your code, I see I was confused as to what you wanted (sort of). You could do this…

#main{
position:absolute;
top:100px;
bottom:125px;
width:100%;
background:red;
}

of course you need to wrap that all in a container with RP.

And if you want to support IE6 you will need to do it like this :slight_smile:

Eric - Many thanks for your solution. I’m a little embarassed that it’s so simple if I’m honest…! I think it was one of those situations where I’d been looking at it for so long that I’d managed to convince myself it was impossible to do!! :rolleyes:

For those who are interested, I’ve included the XHTML and CSS which incorporates Eric’s solution 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>

	<style type="text/css">
		body {
			padding: 0;
			border: 0;
			margin: 0;
		}

		#main {
			position: absolute;
			top: 100px;
			bottom: 125px;
			left: 0;
			width: 100%;
			background: lightyellow;
		}

		#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: lightgreen;
		}
	</style>

</head>

<body>

	<div id="main"></div>

	<div id="top"></div>

	<div id="bottom"></div>

</body>

</html>

Paul - Many thanks for the link. Anything to help ease the process of making a layout work in IE6 is always greatly appreciated!!

Eric - Many thanks for your solution. I’m a little embarassed that it’s so simple if I’m honest…! I think it was one of those situations where I’d been looking at it for so long that I’d managed to convince myself it was impossible to do!

Yes a fresh pair of eyes is always useful :slight_smile: Glad you got it working to your liking.