SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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>
    
    	<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!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, If you want 100&#37; outer container, then first you need a sticky footer type setup. http://www.visibilityinherit.com/cod...ooter-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/cod...ns-withcss.php

    ...or with JS (non-jquery) http://www.visibilityinherit.com/cod...ht-columns.php

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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&#37;;
    background:red;
    }

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    And if you want to support IE6 you will need to do it like this

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!

    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>
    Paul - Many thanks for the link. Anything to help ease the process of making a layout work in IE6 is always greatly appreciated!!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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 Glad you got it working to your liking.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •