CSS stretch content to bottom?

toString

toString

toString

Soldato
Joined
18 Oct 2002
Posts
9,048
Location
London
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			*, body, html {margin:0;padding:0}
			
			body {
				background:#cccccc;
			}
			
			
			/* Layouts */
			#container {
				background:#ffffff;
				width:800px;
				margin:0 auto;
				height:100%;
			}
			
			#logobar {
				height:30px;
				border-bottom:1px solid #000;
			}
			
			#content {
				border:1px solid #fff;
			}
			
			
			#footer {
				height:30px;
				border-top:1px solid #000; 
			}
		</style>
	</head>

<body>

	<div id="container">
	
		<div id="logobar">
			asdfsa
		</div>

		
				
		<div id="content">
			sdfsdfsdf<br/>
			sdfsdfsdf<br/>
			sdfsdfsdf<br/>
		</div>

	
		<div id="footer">
			sdfsdf
		</div>

	</div>
	
</body>
</html>


There's the basic code... I'm trying to get the bottom footer bar to stick to the very bottom of the screen and the content to stretch the gap. I found one example on the net, and although it works in firefox, it's a mess in IE7.

I'm hoping it's something simple... thanks for any help :)
 
hi there is no easy way, but you can use this peice of code to say the minimum height, it has an ie hack to make sure its crossbrowser too

Code: 
#content{
  min-height:600px
}
/* for Internet Explorer */
/*\*/
* html #content{
  height: 600px;
}
/**/
 
Try this, but im not sure its the best solution

Code: 
      #footer {
        height:30px;
        border-top:1px solid #000;
position:absolute;
bottom:0;
width:800px;
background:#fff; 
      }
 
Ahh now that is better! Thanks :)
I have the footer bar 'stuck' to the bottom now, but the main content doesn't stretch all the way down to it. Annoying!
I'll mess about with this absolute thing, I've never used it before..
 
KingAdora said:
Ahh now that is better! Thanks :)
I have the footer bar 'stuck' to the bottom now, but the main content doesn't stretch all the way down to it. Annoying!
I'll mess about with this absolute thing, I've never used it before..
Click to expand...


Code: 
*, body, html {margin:0;padding:0}
      
      body {
        background:#cccccc;
      }
      html,body{height:100%;}
      
      /* Layouts */
      #container {
        position:relative; /*needed for footer*/
        background:#ffffff;
        width:800px;
        margin:0 auto;
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/
        min-height:100%; /* real browsers */
      }
      
      #logobar {
        height:30px;
        border-bottom:1px solid #000;
      }
      
      #content {
        border:1px solid #fff;
        padding-bottom:100px; /* bottom padding for footer */
      }
      
      
      #footer {
        height:30px;
        border-top:1px solid #000; 
        position:absolute;
        bottom:0;
        width:800px;
      }

try this css, this should work, and have min-height so your footer never overlaps your content
 
Ahhh that's fantastic, thank you! :)

The code you posted works perfectly in FF, but not IE7! However, if I remove the following line from the #container:
height:auto !important; /* real browsers */

It works fine in both FF and IE7! :) However I don't have IE6 to test on, so I can't tell if it works for that, but either way at least I know what I require if it doesn't.
Thanks again, I don't mind normal CSS'ing, but this kinda stuff gets quite frustrating at times!
 
#container{
position: relative;
min-height: 100%;
height:auto !important;
height:100%;
}

#footer{
clear:both;
font-size: 75%;
padding: 5px 10px 5px 10px;
margin-top: -30px;
border-top: 1px solid #cccccc;
position: relative;
}

This works, but in Safari and Opera, the footer goes past the bottom of the viewport, and for some reason in IE7 the border on the footer doesnt show.
 
You must log in or register to reply here.
Back
Top Bottom