100% height in CSS, doing more than 100%?!?

edd1e

09-12-2007, 11:24 PM

Hi again guys,

i have almost finished my layout in CSS and i just need it to fill 100% height, i have done this but the page takes up more than 100% for some reasion in both FF and IE6 and causes the page to scroll, look here:

CLICKY!! (http://www.eddnichols.co.uk/temp)

Here is the code:

HTML

<!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">
<head>
<title>testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">

<div id="navbar"></div>

<div id="header_image"></div>

<div id="latest_news"></div>



<div id="news_container">

<div id="news_left"></div>

<div id="news_center"></div>

<div id="news_right"></div>

</div> 
<div id="services_container">

<div id="services_left"> </div>

<div id="pilar"><br />

<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>

<div id="services_center"> </div>

<div id="pilar"><br />

<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>

<div id="services_right"> </div>

</div> 

<div id="content">miain, this should strech 100% height</div>

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

</div>

</body>
</html>

CSS:

body {
text-align: center; /* center's things in pre IE6 */
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-color: #545454;
}

html,body {
height:100%;
}

#container {
margin: 0 auto;
width: 556px;
min-height: 100%;
height: 100%;
text-align: left;
background-color: #CCCCCC;
padding: 0px;
}

#navbar {
width: auto;
height: 62px;
}

#header_image {
width: auto;
background-color: #009999;
height: 149px;
}

#latest_news {
width: auto;
background-color: #009999;
height: 35px;
min-height: 35px;
}

#news_container {
width: 556px;
height: 49px;
min-height: 49px;
overflow: hidden;
}

#news_left {
float: left;
width: 23px;
height: auto;
background-color: #000099;
min-height: 80px;
overflow: hidden;
}

#news_center {
float: left;
width: 512px;
height: auto;
background-color: #333333;
min-height: 80px;
}

#news_right {
float: right;
width: 21px;
height: auto;
background-color: #000099;
min-height: 80px;
overflow: hidden;
}

#news_bottom {
width: 556px;
background-color: #009999;
height: 7px;
min-height: 7px;
}

#services_container {
width: 556px;
height: 111px;
min-height: 111px;
background-color: #FFFFFF;
}

#services_left {
float: left;
width: 166px;
height: 111px;
min-height: 111px;
overflow: hidden;
}

#services_center {
float: left;
width: 166px;
height: 111px;
min-height: 111px;
}

#pilar {
float: left;
width: 28px;
height: 111px;
min-height: 111px;
background-color: #FFFFFF;
vertical-align: bottom;
}

#services_right {
float: right;
width: 166px;
height: 111px;
min-height: 111px;
overflow: hidden;
}

#content_container {
background-color: #CCCCCC;
height: 100%;
min-height: 100%;
width: 556px;
}

#content {
clear: both;
background-color: #336666;
height: 100%;
min-height: 100%;
width: 556px;
overflow: auto;
}

#footer {
clear: both;
background-color: #333333;
min-height: 35px;
width: 556px;
}

Any ideas guys? cheers,

Edd :)

dudeson

09-12-2007, 11:31 PM

that page is doing exactly what u want it to do, that area is exactly 100% the height of the browser window. if u want the hole page to be 100% height try having the container be 100% height, not just the internal part.

hope thats helpfull

edd1e

09-12-2007, 11:38 PM

hmm but i already have them set to 100%

Both #container & #content.

It works if i only set the container to 100% but i need also #content to fill the gap between the header and footer.

jlhaslip

09-13-2007, 12:35 AM

hmm but i already have them set to 100%

Both #container & #content.
That's 100 % each of the height of the body and the container, so 200%. The height ids the height of the viewport (display). I'd suggest you remove one of them. Not sure which one, though... :)

edd1e

09-13-2007, 12:52 AM

thanks for you reply, i have done as u said and taken the #content out of the container so its not on its own and set's it height to 100% and i still have the same problem, its stretching way to much still.

CLICKY!!!! (http://www.eddnichols.co.uk/temp/)

heres the updated code:

HTML

<!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">
<head>
<title>testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">

<div id="navbar"></div>

<div id="header_image"></div>

<div id="latest_news"></div>



<div id="news_container">

<div id="news_left"></div>

<div id="news_center"></div>

<div id="news_right"></div>

</div> 
<div id="services_container">

<div id="services_left"> </div>

<div id="pilar"><br />

<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>

<div id="services_center"> </div>

<div id="pilar"><br />

<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>

<div id="services_right"> </div>

</div> 

</div>

<div id="content">main, this should stretch 100% height</div>

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

</body>
</html>

CSS:

body {
text-align: center; /* center's things in pre IE6 */
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-color: #545454;
}

html,body {
height:100%;
}

#container {
margin: 0 auto;
width: 556px;
height: auto;
text-align: left;
background-color: #CCCCCC;
padding: 0px;
}

#navbar {
width: auto;
height: 62px;
}

#header_image {
width: auto;
background-color: #009999;
height: 149px;
}

#latest_news {
width: auto;
background-color: #009999;
height: 35px;
min-height: 35px;
}

#news_container {
width: 556px;
height: 49px;
min-height: 49px;
overflow: hidden;
}

#news_left {
float: left;
width: 23px;
height: auto;
background-color: #000099;
min-height: 80px;
overflow: hidden;
}

#news_center {
float: left;
width: 512px;
height: auto;
background-color: #333333;
min-height: 80px;
}

#news_right {
float: right;
width: 21px;
height: auto;
background-color: #000099;
min-height: 80px;
overflow: hidden;
}

#news_bottom {
width: 556px;
background-color: #009999;
height: 7px;
min-height: 7px;
}

#services_container {
width: 556px;
height: 111px;
min-height: 111px;
background-color: #FFFFFF;
}

#services_left {
float: left;
width: 166px;
height: 111px;
min-height: 111px;
overflow: hidden;
}

#services_center {
float: left;
width: 166px;
height: 111px;
min-height: 111px;
}

#pilar {
float: left;
width: 28px;
height: 111px;
min-height: 111px;
background-color: #FFFFFF;
vertical-align: bottom;
}

#services_right {
float: right;
width: 166px;
height: 111px;
min-height: 111px;
overflow: hidden;
}

#content {
margin: 0 auto;
background-color: #336666;
height: 100%;
min-height: 100%;
width: 556px;
overflow: auto;
}

#footer {
clear: both;
margin: 0 auto;
background-color: #333333;
min-height: 35px;
width: 556px;
}

Cheers guys

jlhaslip

09-13-2007, 01:52 AM

try this:
#content {
margin: 0 auto;
background-color: #336666;
width: 556px;
overflow: auto;
}

Remove the Min-height which seemed to be causing the extra height. And now the page is 100% height for the container (plus the footer which is outside of the container).

If this isn't what you want/need, reassess the thread, because I am becoming confused. Your first code did exactly what you told it to, and then I think you changed your mind, or I didn't have a full grasp of what you wanted, but you complained about the content stretching too far, so here is the solution to date.

Post back telling us if this fixes it for you. Remembering that this content div will stretch as you add information.
*edit*
Just noticed that the content div is *outside* the container. Did you want the content div to be inside the container div and stretch to a fixed footer at the bottom of the page? that would need a different bit of code... post back here, please, if this is what you want. thanks.

jlhaslip

09-13-2007, 02:02 AM

here is the solution I alluded to for the sticky footer

http://ryanfait.com/sticky-footer/

edd1e

09-13-2007, 07:37 AM

try this:
Just noticed that the content div is *outside* the container. Did you want the content div to be inside the container div and stretch to a fixed footer at the bottom of the page? that would need a different bit of code...

thats what i originally wanted yes and that would be best, any ideas on how to do this?

I could not get your above method to work with the #content which is currently outside of the container

harbingerOTV

09-13-2007, 01:08 PM

it's still doing what your telling it to do. the #content is being 100% of the viewport, so in my case it's 650px high, which is not what you want.

may I suggest a method like this:

http://www.themaninblue.com/writing/perspective/2005/08/29/

dudeson

09-13-2007, 10:21 PM

well heres what i came up with, u can modify it to suit ur needs, hope this is what u need

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body { margin:0; text-align:center;}

#container { width:650px; margin:0 auto; height:100%; background:red;}

#header { width:650px; height:100px; background:blue; }

#nav { width:650px; height:100px; background:green; }

#whatever { width:650px; height:100px; background:#333;}

#whatever2 { width:650px; height:100px; background:#999;}

#footer { width:650px; height:100px; background:#006; position:absolute; bottom:0; }
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="whatever"></div>
<div id="whatever2"></div>

<div id="footer"></div>
</div>
</BODY>
</HTML>

dudeson

09-14-2007, 12:53 AM

for some reason editing my posts doesnt work so here is the same code with an IE fix

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body { margin:0; text-align:center;}

#container { width:650px; margin:0 auto; height:100%; background:red; position:relative; text-align:left; }
#container p { margin:10px; }

#header { width:650px; height:100px; background:blue; }

#nav { width:650px; height:100px; background:green; }

#whatever { width:650px; height:100px; background:#333;}

#whatever2 { width:650px; height:100px; background:#999;}

#footer { width:650px; height:100px; background:#006; margin:0 auto; position:absolute; bottom:0; right:0;}
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="whatever"></div>
<div id="whatever2"></div>
<p>kjfg klklahgflaks dflaol</p>

<div id="footer"></div>
</div>
</BODY>
</HTML>