3 replies [Last post]
bstevo
bstevo's picture
Offline
newbie
Last seen: 11 years 36 weeks ago
Timezone: GMT-6
Joined: 2009-08-05
Posts: 3
Points: 0

I'm having a problem getting a div on my page to fill to the bottom of my browser window. I've been looking at various 100% height solutions for the past hour and nothing is working for me.

When the content is not large enough I want my #loadarea div to fill the extra space in the page, pushing the footer objects to the bottom.

Here's the CSS code.

@import url('css/reset.css');
 
html, body {
	height: 100%;
}
 
body {
	background-image: url(imgs/stripe2.png);
	font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
}	
 
p {
margin-bottom: 1em;
}
 
h1 {
	font-weight: bold;
	font-size: 24px;
	color: black;
	margin-bottom: 20px;
}
 
h2, h3 a {
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	color: black;
}
 
h5 {
	font-weight: bold;
	display: inline;
}
 
#container {
	max-width: 1600px; 
	min-width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	min-height: 100%;
}
 
#header {
	background-image: url(imgs/headers.png);
	background-repeat: no-repeat;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
 
#logo {
	width: 790px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}
 
#logo img {
	border: 0px;
	margin-top: 15px;
}
 
ul#tabs {
	background-image: url(imgs/footershadow.png);
	display: table;
	font-family: "Helvetica Neue", Helvetica, Georgia;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 13px;
	height: 30px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
 
ul#tabs li {
	display: table-cell;
}
 
ul#tabs li a {
	border-bottom-width: 2px;
	border-bottom-color: black;
	border-bottom-style: solid;
	display: block;
	text-decoration: none;
	padding: 0 10px;
	line-height: 34px;
	color: white;
}
 
ul#tabs li a:hover, ul#tabs li.active a {
	border-bottom-color: #7e9c80;
	background: #7e9c80;
	color: white;
}
 
#loadarea {
	border-color: #7e9c80;
	border-width: 25px;
	border-style: solid;
	background-color: white;
	padding: 25px;
	min-height: 100%;
}
 
#footerplan {
	background-image: url(imgs/footerplan.png);
	background-repeat: no-repeat;
	width: 100%;
	height: 50px;
	overflow: hidden;
}
 
#footershadow {
	background-image: url(imgs/footershadow.png);
	background-repeat: repeat-x;
	width: 100%;
	height:18px;
}
 
#footer {
	background-image: url(imgs/footer.png);
	width: 100%;
	font-family: "Helvetica Neue", Helvetica, Verdana;
	text-align: center;
	color: white;
	line-height: 30px;
	height: 80px;
}
 
#footer a {
	color: #48baff;
}
 
#footer img {
	vertical-align: text-bottom;
}

And here's the XHMTL Code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 
<link rel="Shortcut Icon" href="favicon.ico" />
 
<title>GGI/title>
 
<link rel="stylesheet" href="style.css" type="text/css" />
 
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="iestyle.css" />
<![endif]-->
 
</head>
 
<body>
 
<div id="container">
 
<!--[if IE 6]>
		<div class="min_width_inner">
			<div class="min_width_container">
	<![endif]-->
 
	<div id="header">
		<div id="logo"><a href="index.html"><img src="imgs/logo.png" width="777" height="154" alt="GGI Logo" /></a></div>
	</div>
 
		<ul id="tabs">
			<li id="home" class="active"><a href="index.html">Home</a></li>
    		<li id="company"><a href="company.html">Company Info</a></li>
    		<li id="process"><a href="process.html">Process</a></li>
    		<li id="testimonials"><a href="testimonials.html">Testimonials</a></li>
    		<li id="photo"><a href="photo.html">Photo Gallery</a></li>
    		<li id="employment"><a href="employment.html">Employment</a></li>
   			<li id="contact"><a href="contact.html">Contact Us</a></li>
		</ul>
 
	<div id="loadarea">
	<div id="content">
	</div>
	</div>
 
 
	<div id="footerplan"></div>
	<div id="footershadow"></div>
	<div id="footer">
	&copy; GG 2009 &nbsp; // &nbsp; Website Design by SBB<br></br>
	This website contains valid <a href="http://validator.w3.org/check/referrer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> code in accordance with W3C Web Standards.
	</div>
 
		<!--[if IE 6]>
			</div>
		</div>
<![endif]-->
 
</div>	
 
<!-- [if lt IE 7]>
<script type="text/javascript" src="js/iepngfix_tilebg.js"></script>
<![endif]-->
 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jtabs.js"></script>
 
</body>
 
</html>

Both the XHTML and the CSS validate. Any ideas?

bstevo
bstevo's picture
Offline
newbie
Last seen: 11 years 36 weeks ago
Timezone: GMT-6
Joined: 2009-08-05
Posts: 3
Points: 0

If I set my #container div

If I set my #container div to height:100% instead of min-height, the #loadarea div expands to more than the height of the page.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 31 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

You may need to use a

You may need to use a combination of faux columns and sticky footer.

bstevo
bstevo's picture
Offline
newbie
Last seen: 11 years 36 weeks ago
Timezone: GMT-6
Joined: 2009-08-05
Posts: 3
Points: 0

I could use the sticky

I could use the sticky footer thing but the problem is that it's convenient to have the big wrapper div to have a max and min width. I'm just suprised there isn't an easy way to get #loadarea to be as big as it needs to be to fill the page, especially given that the #container div seems to be 100% of the page height (according to firebug).