WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > 100% height conundrum - pure CSS solution?

Reply
  Thread Tools Display Modes
Old 27th February 10, 02:51 PM   #1
matt.elkins
WLC Member
 
Join Date: Feb 2010
Posts: 2
Default 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:

HTML Code:
<!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!
matt.elkins is offline   Reply With Quote
Old 27th February 10, 03:59 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: 100% height conundrum - pure CSS solution?

Try this method. Just right click and view source. (Link compliments of user Rayzur)
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

Last edited by meesa; 27th February 10 at 05:37 PM.
meesa is offline   Reply With Quote
Old 27th February 10, 05:35 PM   #3
Eric
WLC Member
 
Eric's Avatar
 
Join Date: May 2009
Location: Carlsbad, CA
Posts: 41
Default Re: 100% height conundrum - pure CSS solution?

Answered here.. http://www.sitepoint.com/forums/showthread.php?t=662724
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Eric is offline   Reply With Quote
Old 2nd March 10, 11:16 AM   #4
matt.elkins
WLC Member
 
Join Date: Feb 2010
Posts: 2
Default Re: 100% height conundrum - pure CSS solution?

Many thanks, Eric. (Again!)

For those who are interested, I've included the XHTML and CSS which incorporates Eric's solution below:

HTML Code:
<!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>
matt.elkins is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:35 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.