...

View Full Version : How to make a DIV's height 100%...



tbarbedo
03-06-2009, 04:38 AM
i have a layout with a header, content area, right sidebar, and a footer.

The height of the content area expands to fit the text on the page.

When the content area is longer than the sidebar, the sidebar background stops repeating and leaves a blank area until it reaches the footer of the page.

Can someone please help me do this? It's probably easy but I haven't been able to find help elsewhere...

Thanks!

PitbullMean
03-06-2009, 05:09 AM
Source code and a link to your site would help us understand your problem better

tbarbedo
03-06-2009, 05:53 AM
sorry completely forgot...

you can copy and paste this code and see exactly what I am talking about...

style.css

body {
text-align: center;
}

#wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
}

#header {
height: 100px;
border: 1px solid red;
}

#content {
width: 735px;
border: 1px solid blue;
float: right;
}


#left_sidebar {
width: 200px;
float: left;
padding-top: 20px;
padding-bottom: 20px;
border: 1px solid orange;
}

#left_sidebar li {
padding-left:20px;
padding-right: 20px;
}

#footer {
height: 100px;
border: 1px solid brown;
}


.clear { clear: both; }

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="wrapper">

<div id="header">
header
</div>

<div id="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</p>
</div>

<div id="left_sidebar">
navigation<br/>
navigation<br/>
navigation<br/>
navigation<br/>
navigation<br/>
</div>

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

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

PitbullMean
03-06-2009, 06:06 AM
Try following this example

http://nopeople.com/CSS/equal_length_columns/index.html

PitbullMean
03-06-2009, 06:33 AM
or just replace your left_sidebar with this


#left_sidebar {
width: 200px;
float: left;
padding-top: 20px;
padding-bottom: 9999px;
margin-bottom: -9999px;
border: 1px solid orange;
}

TinyScript
03-06-2009, 06:33 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body {
text-align: center;
}

#wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
}

#header {
height: 100px;
border: 1px solid red;
}

#content {
width: 735px;

border: 1px solid blue;
float: right;
}


#left_sidebar {
width: 200px;

float: left;
padding-top: 20px;
padding-bottom: 17.9%;
border: 1px solid orange;

}



#footer {
height: 100px;
border: 1px solid brown;
}

.clear{clear:both}

</style>
</head>
<body>

<div id="wrapper">

<div id="header">
header
</div>

<div id="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</p>
</div>

<div id="left_sidebar" >
navigation<br/>
navigation<br/>
navigation<br/>
navigation<br/>
navigation<br/>
</div>

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

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


I have no clue how that's supposed to work. How were you expecting the heights to be established? I just added padding to the bottom of the div.

PitbullMean
03-06-2009, 06:51 AM
well that code you just posted script doesnt work. I just tested it.
Granted it looks fine if you dont try to space out your paragraphs by hitting enter, but when i did (link below)
http://www.habugfx.com/test/script.html

Where is mine does

http://www.habugfx.com/test/test.html

You also may want to look in to using html colour codes cause brown isnt a valid colour value.

http://jigsaw.w3.org/css-validator/validator?uri=http://habugfx.com/test/style.css&profile=css21&usermedium=all&warning=1&lang=en

TinyScript
03-06-2009, 06:59 AM
well that code you just posted script doesnt work. I just tested it.


Where is mine does

http://www.habugfx.com/test/test.html

Works in FF
What's up with IE? I don't even open that craptastic browser.
Oh, it's close. needs an adjustment. It certainly DOES work.
http://i39.tinypic.com/2eqf6ds.gif

TinyScript
03-06-2009, 07:00 AM
your left div is cutting into the footer pitbull

TinyScript
03-06-2009, 07:07 AM
pitbull's site has tons of better examples anyway. great site dude!

PitbullMean
03-06-2009, 07:21 AM
thanks

Excavator
03-06-2009, 08:26 AM
i have a layout with a header, content area, right sidebar, and a footer.

The height of the content area expands to fit the text on the page.

When the content area is longer than the sidebar, the sidebar background stops repeating and leaves a blank area until it reaches the footer of the page.

Can someone please help me do this? It's probably easy but I haven't been able to find help elsewhere...

Thanks!
Hello tbarbedo,
Faux Columns (http://www.google.com/search?hl=en&q=faux+columns)would work for you. Have a look at a demo of mine at http://nopeople.com/CSS/3-column/index.html If you look in the CSS you'll see the line background: url(bg.jpg) repeat-y; loading an 804px by 2px background image http://nopeople.com/CSS/3-column/bg.jpg that looks like the columns when it's repeated. Any one of the three columns can expand that so they are always the same length.

Excavator
03-06-2009, 08:34 AM
your left div is cutting into the footer pitbull

To show you why, have a look at that pitbullmean's attempt but with colors added:
body {
text-align: center;
}

#wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
overflow:hidden;
}

#header {
height: 100px;
border: 1px solid red;
}

#content {
width: 735px;
border: 1px solid blue;
float: right;
}


#left_sidebar {
width: 200px;
float: left;
padding-top: 20px;
padding-bottom: 9999px;
margin-bottom: -9999px;
border: 1px solid orange;
background: #000;
}

#left_sidebar li {
padding-left:20px;
padding-right: 20px;
}

#footer {
height: 100px;
border: 1px solid brown;
background: #f00;
}


.clear { clear: both; }

Camron467
03-07-2009, 03:27 AM
There is an easy, no coding way, you need to make an image, you can make it the background repeating on the y axis.

Say, you had two divs, one floating left, and the other filling in the other space, what you do is if the floated div is 100px, on your image, you make the left side 100px, with the color of your choice, and the right side, the width of the other div, and set it as a background....

tbarbedo
03-07-2009, 07:53 AM
Camron.. I have background images on all of those divs...
I also have the sidebar background repeating-y

Excavator...
Your way works but only if using a set color for the background..i have bg images and the last 10px on the edge of the image has some transparency which lets the bg show through...

Pitbull...
When I tried setting the margin and padding to crazy numbers like 9999px..it overflows down the page over the footer...tried to use overflow:hidden with no luck...

Excavator
03-07-2009, 08:12 AM
Excavator...
Your way works but only if using a set color for the background..i have bg images and the last 10px on the edge of the image has some transparency which lets the bg show through...


I don't think you understand how faux columns works. Did you look at the link? - http://www.google.com/search?hl=en&q=faux+columns

PitbullMean
03-07-2009, 09:04 AM
This link may even simplify this for novice coders. When you set the size of columns u want the image is provided below just scroll down a bit hard to see since its 1px high

http://www.neuroticweb.com/recursos/2-columns-layout/index.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum