Stretching div to 100% HEIGHT

Forum Moderators: not2easy

Message Too Old, No Replies

Stretching div to 100% HEIGHT

can't seem to get page height to fit bigger screens

futurenow

2:30 pm on Jul 7, 2008 (gmt 0)

I am an intermediate/begginner with css and have been working on this issue for about two weeks. I have searched and searched and tried every alternative I have encountered and heven't found a solution yet. I keep getting a fixed width and height setting in any size screen and what I would like is for the height to stretch automatically to fit the screen height for this particular div which is the main div that contains all the rest of the content.Could someone please enlighten me...PLEASE?

here's the code I've got at the moment...

html, body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;

}
#container
{
min-height:100%;
width: 946px;
display: block;
padding: 0;
background-image: url(images/ementa_bg_div.png);
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
}
/* Hack for IE */
* html #container {
height: 100%;
}
/* End IE Hack */

#footer {
clear: both;
}

4css

11:47 pm on Jul 7, 2008 (gmt 0)

Hi futurenow,

Welcome to WebmasterWorld!

I noticed that you have clearing set for your footer.

Do you have other code that you aren't posting? Other div information?

Also, what dtd are you using? Also, do you have some (x)html that you could post for us? Is this just an IE6, IE7 problem, or is it cross browser?

If you read the forum charter [webmasterworld.com] it will explain to you how to post code for us to review for you.

One other question is, have you tried to validate your page? Make sure that you don't have any errors in your (x)html or css?

4~css!

futurenow

8:42 pm on Jul 9, 2008 (gmt 0)

Hi 4CSS,

the clearing footer is just some code I've seen suggested out of the many things I've experimented but which didn't do anything.

I have only been checking this code with IE 7 and FF and can't get 100% height in either. I have checked it on various screen sizes and the size remains fixed it doesn't adjust.

As for the html, I didn't post it as I figured it is a bit long and might not be apreciated but here it is:

--------------------------------------------------------------------
<div id="overlay"></div>
<table id="content_overlay" align="center"><tr><td>
<div id="container" align="center">
<table id="Table_01" width="947" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img id="ementa_for_GO_01" src="images/ementa_for_GO_01.png" width="209" height="22" alt="" /></td>
<td colspan="2" rowspan="6">
<img id="ementa_for_GO_02" src="images/ementa_for_GO_02.png" width="97" height="137" alt="" /></td>
<td colspan="4" rowspan="3">
<img id="ementa_for_GO_03" src="images/ementa_for_GO_03.png" width="196" height="89" alt="" /></td>
<td colspan="7" rowspan="3">
<img id="ementa_for_GO_04" src="images/ementa_for_GO_04.png" width="284" height="89" alt="" /></td>
<td colspan="2" rowspan="6">
<img id="rest_bckgrd_3" src="images/rest_bckgrd_3.png" width="160" height="137" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="ementa_for_GO_06" src="images/ementa_for_GO_06.png" width="19" height="115" alt="" /></td>
<td colspan="4">
<img id="logo_b" src="images/logo_b.png" width="190" height="58" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="58" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="restaurante_b" src="images/restaurante_b.png" width="88" height="15" alt="" /></td>
<td colspan="2" rowspan="2">
<img id="loja_b" src="images/loja_b.png" width="38" height="15" alt="" /></td>
<td rowspan="2">
<img id="eventos_b" src="images/eventos_b.png" width="64" height="15" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="sub_quem_somos_b" src="images/sub_quem_somos_b.png" width="112" height="27" alt="" /></td>
<td colspan="2" rowspan="2">
<img id="sub_ementa_b" src="images/sub_ementa_b.png" width="72" height="27" alt="" /></td>
<td colspan="2" rowspan="2">
<img id="sub_bio_b" src="images/sub_bio_b.png" width="86" height="27" alt="" /></td>
<td colspan="3" rowspan="2">
<img id="sub_nutri_b" src="images/sub_nutri_b.png" width="80" height="27" alt="" /></td>
<td colspan="3" rowspan="2">
<img id="sub_ementa_cursos_cozinha_b" src="images/sub_ementa_cursos_cozinha_b.png" width="130" height="27" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img id="ementa_for_GO_16" src="images/ementa_for_GO_16.png" width="190" height="42" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img id="ementa_for_GO_17" src="images/ementa_for_GO_17.png" width="480" height="21" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="7">
<img id="rest_bckgrd_1" src="images/rest_bckgrd_1.png" width="136" height="147" alt="" /></td>
<td colspan="3">
<img id="ementa_center_1" src="images/ementa_center_1.png" width="123" height="39" alt="" /></td>
<td colspan="3">
<img id="ementa_center_2" src="images/ementa_center_2.png" width="184" height="39" alt="" /></td>
<td colspan="4">
<img id="ementa_ctr_lista_link_top_b" src="images/ementa_ctr_lista_link_top_b.png" width="157" height="39" alt="" /></td>
<td colspan="6" rowspan="2">
<img id="search_area" src="images/search_area.png" width="190" height="48" alt="" /></td>
<td rowspan="3">
<img id="rest_bckgrd_4" src="images/rest_bckgrd_4.png" width="156" height="66" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="4">
<img id="ementa_center_3" src="images/ementa_center_3.png" width="464" height="57" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="ementa_for_GO_25" src="images/ementa_for_GO_25.png" width="190" height="18" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td rowspan="21">
<img id="ementa_for_GO_26" src="images/ementa_for_GO_26.png" width="16" height="370" alt="" /></td>
<td colspan="3" rowspan="3">
<img id="home_button_b" src="images/home_button_b.png" width="162" height="42" alt="" /></td>
<td colspan="3">
<img id="rest_bckgrd_5" src="images/rest_bckgrd_5.png" width="168" height="26" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="8">
<img id="rest_bckgrd_6" src="images/rest_bckgrd_6.png" width="168" height="142" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="3">
<img id="ementa_center_4" src="images/ementa_center_4.png" width="464" height="53" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img id="restaurante_button_b" src="images/restaurante_button_b.png" width="162" height="45" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="7">
<img id="rest_bckgrd_2" src="images/rest_bckgrd_2.png" width="136" height="130" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="3">
<img id="ementa_center_5" src="images/ementa_center_5.png" width="464" height="60" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img id="galeria_button_b" src="images/galeria_button_b.png" width="162" height="47" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img id="eventos_button_b" src="images/eventos_button_b.png" width="162" height="42" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="5">
<img id="ementa_center_6" src="images/ementa_center_6.png" width="464" height="87" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="6">
<img id="rest_bckgrd_7" src="images/rest_bckgrd_7.png" width="168" height="101" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img id="loja_button_b" src="images/loja_button_b.png" width="162" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="6">
<img id="ementa_for_GO_39" src="images/ementa_for_GO_39.png" width="136" height="93" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img id="maisvida_button_b" src="images/maisvida_button_b.png" width="162" height="43" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="3">
<img id="ementa_center_7" src="images/ementa_center_7.png" width="464" height="46" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="38" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<img id="contactos_button_b" src="images/contactos_button_b.png" width="162" height="46" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="6">
<img id="rest_bckgrd_8" src="images/rest_bckgrd_8.png" width="168" height="101" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="3">
<img id="ementa_center_8" src="images/ementa_center_8.png" width="464" height="46" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<img id="ementa_for_GO_45" src="images/ementa_for_GO_45.png" width="136" height="66" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img id="horario_button_b" src="images/horario_button_b.png" width="162" height="43" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img id="click_aqui_b" src="images/click_aqui_b.png" width="464" height="48" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img id="ementa_for_GO_48" src="images/ementa_for_GO_48.png" width="162" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img id="ementa_for_GO_49" src="images/ementa_for_GO_49.png" width="136" height="98" alt="" /></td>
<td colspan="10">
<img id="ementa_center_10" src="images/ementa_center_10.png" width="464" height="98" alt="" /></td>
<td colspan="3">
<img id="ementa_for_GO_51" src="images/ementa_for_GO_51.png" width="158" height="98" alt="" /></td>
<td colspan="4">
<img id="ementa_for_GO_52" src="images/ementa_for_GO_52.png" width="188" height="98" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="98" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="88" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="64" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="156" height="1" alt="" /></td>
<td></td>
</tr>
</table>
</div>

</td></tr></table>
</body>

</html>
--------------------------------------------------------------------

I apologize if this is not the correct way to post on this forum I checked the page you recommended it seemed like it said not to post long codes but since you asked for my html I thought this should be it. Please clear this up for me since it also seemed like we shouldn't post links either...

I am not getting any errors in dreamweaver validation.

I seriously hope you can help me I am starting to think that it isn't possible.

Thanks.
Dan

futurenow

8:48 pm on Jul 9, 2008 (gmt 0)

Just in case you're wondering the page begins with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Ementa - Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

futurenow

2:28 pm on Jul 11, 2008 (gmt 0)

I'm not ssure if it's got anything to do with the way I sliced it from Photoshop, but please help, say something...

PhotoJoe

1:35 am on Jul 13, 2008 (gmt 0)

Hi futurenow,

I only have about 1 year experience using CSS.

But I did notice a couple things I would like to point out for you.

I think you code has errors. Have you check your html code at [validator.w3.org...] Your code needs to pass this first. Then next check to your CSS code at [jigsaw.w3.org...]

Have you gone through all the lessons (tutorials) at [w3schools.com...] on CSS.

FYI
clear:both
Is used to clear previously set float:left and/or float:right style rules you may have applied previously.

Also I was wondering what are you trying to accomplish by having a body style rule of height: 100%;?

PhotoJoe

SuzyUK

6:54 am on Jul 13, 2008 (gmt 0)

Welcome futurenow, and PhotoJoe

futurenow -that is way way too much code and is possibly why there is no answers yet, I should have edited it out. As an aside I haven't see a sliced layout like that in a very long time, is this the real thing or just a mock up? it's seems very image heavy..

Anyhow that's got nothing to do with your problem which can actually be illustrated much more simply especially if you are not new to CSS

You state that it is the #container div you'd like to "stretch" so you should first be able to get it to stretch (or not) without any content in it, so we didn't need the whole internal table and image slices ;)

Here's your code simplified, which is what we encourage you to do for two reasons,

not everyone has time to 'debug' large screeds of code, most times they'll open a post see all that, glaze over and leave ;)
it should also help you get to the root of your own problem, people will often be more willing to help those who've tried to help themselves first :)

i.e. you wanted to know if it was your image slices causing the problem, in which case you could've simply removed the whole inner table yourself

<body>
<div id="overlay"></div>
<table id="content_overlay" align="center">
<tr>
<td>
<div id="container" align="center">
<table id="Table_01" width="947" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>hello world</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>

that along with the Doctype you provided (yes we always need to see that bit) tells us all we need to know.

The reason your height/width is fixed is because it's only as wide/high as the table which is fixed by the combined image heights/widths.. That is NOT CSS

You have two things wrong, that I can see anyway,
The Doctype you are using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

is one that triggers Quirks Rendering mode, and while that often helps with these outdated table type layouts it does restrict your CSS usage.

if you switch to a strict rendering one.. e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

that should at least start the ball rolling, for you to get to understanding CSS better and getting the bets it can offer for your layouts. In Quirks rendering mode IE will not do things very well and one if the things it definitely won't do is min-height.. It will in fact only support that in IE7, with a standards compliant Doctype :o. So although you've got the IE5.5/6 height hack.. you're leaving 7 out in the cold right now ;)

Now the other thing is.. even if you have a compliant browser and doctype to test the above code with, you have a nesting problem. Height works by inheritance, which is why the chain must start at the top, and why

html

and

body

must both have 100% height to start with, it's so the inheritance can be passed through the direct descendants, your CSS suggests this as your chain:

html > body > #container

but your HTML is

html > body > table > tr > td > #container

the inheritance chain is broken between body and container! Theoretically the container is taking it's height from the <td> that it's nested inside (although that's another problem with tables they don't quite work the same.. too much info for this post though)

anyway the theory is technically still the same.. if you move your #container div so it's a direct child of the <body> element (wrap it around both the tables) you should be able to get it to "stretch", and see what you're trying to achieve.

<body>
<div id="overlay"></div>
<div id="container" align="center">
<table id="content_overlay" align="center">
<tr>
<td>
<table id="Table_01" width="947" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>hello world</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>

despite all that, the 100% height thing is fragile, especially once you try to pass it through table elements - but it's often not necessary. CSS is the tool to provide a suggestion of appearance and if your reasons for trying to force the height is to provide a background effect then an image attached to the body background will often achieve the same effect.

oh and apart from that there is way too much image slicing! ;) one thing about CSS is that we actually try to stick images back together where possible (search for "CSS Sprites") and hook them onto available semantic containing elements. So instead of making the element (table, tr, td,) fit the image.. make the image fit the element (ul, div, h1 etc..) ;)

hth take you a bit further along your CSS Path.

PS: add a background color to your container to help you see what it's doing

[edited by: SuzyUK at 7:03 am (utc) on July 13, 2008]

Tricker

5:09 am on Jul 14, 2008 (gmt 0)

Hi futureNow,

please checkout the code below and hope it will work for you..

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>One Hundred Percent Height Divs</title> 
<style type="text/css" media="screen"> 
body { 
margin:0; 
padding:0; 
height:100%; /* this is the key! */ 
position:absolute;
} 
#left { 
position:absolute; 
left:0; 
top:0; 
padding:0; 
width:200px; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 
.content { 
margin-left:220px; 
margin-right:220px; 
margin-bottom:20px; 
color:#333; 
background:#ffc; 
border:1px solid #333; 
padding:0 10px; 
height:100%;
} 
#right { 
position:absolute; 
right:0; 
top:0; 
padding:0; 
width:200px; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 
#left p { 
padding:0 10px; 
} 
#right p { 
padding:0 10px; 
} 
p.top { 
margin-top:20px; 
} 
</style> 
</head> 
<body scroll="no"> 
<div id="left"> 
<p class="top">This design uses a defined body height of 100% which allows setting the 
contained left and right divs at 100% height.</p> 
<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
</div> 
<div class="content"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div> 
</body> 
</html>

Thanks,
Tricker

futurenow

5:57 pm on Jul 16, 2008 (gmt 0)

THANK YOU SO MUCH FOR YOUR HELP AND ASSISTANCE, I HAVEN'T REALLY BEEN ABLE TO PUT IT TO USE YET BUT IT HAS ALREADY HELPED ME TO UNDERSTAND THAT I WILL HAVE TO MAKE SOME ADJUSTMENTS TO THE WAY I INITIALLY PLANNED TO MOUNT THE PAGES. I AM TRYING TO USE ONE BACKGROUND IMAGE (VERY DETAILED) WHERE ALL THE ELEMENTS FALL INTO VERY SPECIFIC LOCATIONS. SO I THOUGHT THAT IT WOULD BE MUCH EASIER TO SEPERATE EVERYTHING USING TABLES, BUT AS SUZYUK MENTIONED "the 100% height thing is fragile, especially once you try to pass it through table elements", THIS I WAS SUSPICIOUS OF BUT HADN'T ANY REAL EXPERT INFO ON SO I AM NOW MORE AWARE THAT IT IS A JOB FOR DIVS AND I HOPE I CAN ALIGN THEM ALL ACCORDINGLY WITH CSS.... I'M HOPING.

THANK YOU SO MUCH!

I WILL KEEP REVIEWING THIS CONTINOUSLY SO IF ANYONE HAS ANY MORE SUGGESTIONS OR ADVISE THAT MAY SLIGHTLY EASE THE WAY I WILL BE MOSTLY GRATEFUL. THANKS AGAIN!