100% Height, driving me LOONEY

**xixel** · Sep 10, 2007, 13:53

Alright, its been a while since I've done coded out a layout, let alone a CSS layout... I need some help here, I'm trying to get this full height and I've pulled out all of my hair trying to do so

http://www.xixel.net/PT3/

Any help or guidance would be greatly appreciated

**Chroniclemaster1** · Sep 10, 2007, 14:51

Yeah, height:100% doesn't work at all in a number of cases. width:100% is usually all right though even that doesn't work well sometimes. But I don't recommend trying to set height as a percentage. Even if you can get it to work, when you're making changes elsewhere in your CSS file, they can all too easily make your height crash.

The most important thing will be to let your content fill it out. If you're doing that, nothing else will look horribly bad. There is one trick you might try though.

Turn the problem around. Look at it not as trying to get the body to stretch 100%, but getting the footer to stay at the bottom of the screen. If I remember I got my website to work by setting the div to bottom:0. That worked once I put a wrapper div around it and align the wrapper vertical-align:baseline. You have to set both divs to position:absolute. Hope that gets you going in the right direction.

**felgall** · Sep 10, 2007, 19:03

I use

html, body {height : 100%; overflow : visible;}

which works in all the browsers that I tried it in.

**markbrown4** · Sep 10, 2007, 19:11

That seems logical felgall, i'll give it a good kicking and see what falls off.

**joejoe04** · Sep 10, 2007, 20:22

I would try and take the the footer div out of the container div (which is set to 100&#37

. Then give the container a bottom margin of -58px (the height of your footer). Then add a new div inside the container where the footer div used to be with height:58px; clear:both; (used essentially as padding for where the footer will go). Then put the footer div right outside the container div and right after it, and I think it should work. For more details and where I learned this from, visit: http://www.sitepoint.com/forums/showthread.php?t=143801 (Paul O'B is the man)

But like they said above, I wouldn't put too much into this if you can't get it, b/c once you have content on the site, it should fill it self out.

**all4nerds** · Sep 10, 2007, 23:04

Hello

your header logo image is missing, and maybe rethink how you do your body and header image, your code 100% high

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>PT3</title>
<style type="text/css">
*{padding:0;margin:0;}

body{background: url('images/header-tile.gif') 0% 0% repeat-x;}

html,body{height:100%;}

#container{
background: url('images/side-tile.gif') 0% 0% repeat-y;
margin-top:-58px;
}

* html #container{height:100%;}
head+body #container{min-height:100%;overflow:auto;}

#header{
height:140px;
background: url('http://www.xixel.net/PT3/images/logo1.gif') 0% 0% no-repeat;
border-top:58px solid #fafafa;
}

#hright {
float:right;
width:51px;
height: 140px;
background: url('images/header-cap.gif') 0% 0% no-repeat;
}

#left{
float:left;
width:225px;
background: url('images/side-nav.gif') 0% 0% no-repeat;
}

#right{
float:right;
width:51px;
height:100px;
background: url('images/content-cap.gif') 0% 0% no-repeat;
}


#middle{
overflow:auto;
font-size:80%;
background: url('images/content-tile.gif') 0% 0% repeat-x;
}
* html #middle{float:left;}
* html #middle p,* html #footer{height:1%;}

#footer{
overflow:hidden;
background: url('images/bottom-tile.gif') 0% 0% repeat-x;
min-height:1%;
}

#fleft,#fright {height:58px;}

#fleft{
float:left;
width:225px;
background: url('images/side-bcap.gif') 0% 0% no-repeat;
}

#fright {
float:right;
width:51px;
background: url('images/bottom-cap.gif') 0% 0% no-repeat;
}

h1,h2,h3,h4 { margin: 0.2em 0 }
p{margin: 0.5em 0}

	
#sidenav {
margin:50px 0 0 0;
padding:0 15px;
list-style:none;
}

#sidenav li{background: url('images/side-dots.gif') repeat-x bottom right;}

#sidenav a {
padding-left: 15px;
display: block;
font-family: Verdana, Tahoma, Sans-Serif;
font-size: 10px;
text-decoration: none;
color: #808080;
height: 25px;
line-height: 25px;
background: url('images/bullet.gif') 4px 11px no-repeat;
}

#sidenav a:hover,#sidenav  a:active {
background: #f2f2f2 url('images/redbullet.gif') 4px 11px no-repeat;
cursor: pointer;
text-decoration: underline;
color: #333333;
}

</style>
</head>
<body>


<div id="container">


<div id="header">

<div id="hright"></div>

</div>

<div id="left">
<ul id="sidenav">
<li><a href="##">Side Item</a></li>
<li><a href="##">Side Item</a></li>
<li><a href="##">Side Item</a></li>
<li><a href="##">Side Item</a></li>
<li><a href="##">Side Item</a></li>
</ul>
</div>

<div id="right">&nbsp;</div>

<div id="middle"><p>Content.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Now to make it full height... ugh</p></div>


</div>



<div id="footer">

<div id="fleft"></div>

<div id="fright"></div>

</div>


</body>
</html>

**xixel** · Sep 12, 2007, 12:20

wow, thanks alot for your time! makes more sense to me - again greatly appreciated

The SitePoint Forums have moved.

User Tag List

Thread: 100% Height, driving me LOONEY

Thread Tools

Display

100% Height, driving me LOONEY

Bookmarks

Bookmarks

Posting Permissions