PDA

Click to See Complete Forum and Search --> : Full page.

CodyTheGrate
04-09-2007, 11:24 AM
Doing some CSS for CodyTheGrate while he is away, and he gave me his UN/PW to this forum incase I got stuck. He said to ask any questions.

My question is simple, I have a test page to show you:
http://2hourslater.com/food.html

I want the white content part of the page to go all the way to the bottom on every page, no matter how much content is input.

Help me out!

Thanks.
WebJoel
04-09-2007, 11:34 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body, html {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:12px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}
</style>

<style type="text/css" title="currentStyle" media="screen">
@import "http://2hourslater.com/food.css";
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>


<div id="container" style="height:100%;">
<h1>Test Header</h1>
<div id="float">

<p>This is a float. Floats are weird. They float on top of things, hardy har har. I need to re-do my layouts using floats instead of absolute positioning. Because that is the way to do it. And this next word is a test to see what it does when the word is too big for the box. Sorry, I already tested for it and it looked dumb!</p>
</div>
<p>All glob probably test paragraph to di la moses. All I want, in a bottle of gum. The red pie equalled blue in the ocean of pale. Random random random this is not random. Cool. Pool. Stool. Those rhymed, and I don't care because this is a test paragraph and I am just going to erase it later, that's that.</p>
<p>All glob probably test paragraph to di la moses. All I want, in a bottle of gum. The red pie equalled blue in the ocean of pale. Random random random this is not random. Cool. Pool. Stool. Those rhymed, and I don't care because this is a test paragraph and I am just going to erase it later, that's that.</p>
<p>All glob probably test paragraph to di la moses. All I want, in a bottle of gum. The red pie equalled blue in the ocean of pale. Random random random this is not random. Cool. Pool. Stool. Those rhymed, and I don't care because this is a test paragraph and I am just going to erase it later, that's that.</p>
<p>All glob probably test paragraph to di la moses. All I want, in a bottle of gum. The red pie equalled blue in the ocean of pale. Random random random this is not random. Cool. Pool. Stool. Those rhymed, and I don't care because this is a test paragraph and I am just going to erase it later, that's that.</p>

<p>All glob probably test paragraph to di la moses. All I want, in a bottle of gum. The red pie equalled blue in the ocean of pale. Random random random this is not random. Cool. Pool. Stool. Those rhymed, and I don't care because this is a test paragraph and I am just going to erase it later, that's that.</p>
</div>
<div id="footer">This is a footer</div>
</body>
</html> Try this. It should work for IE and Fx. :)
CodyTheGrate
04-09-2007, 11:41 AM
Yeah, I added that to the style sheet, but it's a no-go. Still doesn't work.

Refresh the page, and I have your suggestion still on there. I could have swore height: 100%; would work, not sure what's going on here.
CodyTheGrate
04-11-2007, 08:47 AM
Any takers on this?
Centauri
04-11-2007, 09:41 AM
Yep,

To get the container div to full screen height, it must reference the height of its parent, the body, which in turn references the height of its parent, the html. The only reliable reference is full height - 100%, so first set both html and body to 100% height. As you still want the #container div to grow with content, set its min-height to 100% - as IE6 doesn't understand that, feed it 100% height via a star html entry.

To get the footer to position at the end of this, move it to after the #container div in the html - it will therefore sit below the container. If we then set a height for the footer and give it a negative top margin equal to its height, this will "pull" it back up over the bottom of the container. To ensure it does not cover any text, give an extra 20px padding to the bottom of #content.

So, html change this is a test paragraph and I am just going to erase it later, that's that.</p>
</div>
</div>
<div id="footer">This is a footer
</div>
</body>
</html>

and the css /* Cody's Food / Nutrition Calculator Style Sheet v1.0 */


/* Page Elements */

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

body {
font: 10pt arial;
color: #000;
background-color: #999999;
}

p {
text-indent: 10px;
margin-bottom: 5px;
text=align: justify;
}

h1 {
text-align: center;
margin: 0 0 3px 0;
display: block;
font: 16pt arial;
font-weight: bold;
background-color: #CCCCCC;
}

a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: #000;
}

a:hover, a:active {
text-decoration: underline;
}


/* Divs */

#container {
margin: 0 auto;
background-color: #FFF;
width: 600px;
padding: 0 1px;
min-height: 100%;
}

* html #container {
height: 100%;
}

#content {
padding: 0 4px 25px 2px;
border-right: dashed 1px #000;
margin: 0 125px 0 0;
}

#instruct {
margin: 0 3px 0 0;
padding: 2px;
border: solid 1px #000;
width: 110px;
float: right;
background-color:#00FFCC;
}

#footer {
width: 600px;
color: #FFF;
background-color: #999999;
text-align: center;
height: 20px;
line-height: 20px;
margin: -20px auto 0;
}

I also fixed up a few other things in the css - width units not declared for <h1>, but width not needed anyway, and units are not required when the dimension is zero (saves a few bytes of code and improves readability).

Cheers
Graeme

PS any reason you are using xhtml transitional doctype ? will you be using special xml features, and what are you transitioning from ? Probably best to go with html 4.01 strict.
CodyTheGrate
04-11-2007, 10:17 AM
Thanks.

But here is a new problem. The white goes all the way down. But the dashed line that follows the content doesn't.

Also, the footer disappeared!
Centauri
04-11-2007, 05:52 PM
Get rid of position: relative; on the #container - it is making the #container div render on top of the footer, obscuring it - this was not in the code I gave for a reason.

There is no way of making the actual internal #content div exrtend all the way due to needing to mix units (% and pixels) within the one measurement. The best way is to use a faux column - rather than the dotted line being a #content border, make it a y-repeated background graphic of #container.

Cheers
Graeme
WebJoel
04-11-2007, 07:18 PM
Without testing the examples, the only way you're going to get 100% height from IE is to make "body, html {height:100%;}" (MUST have BOTH) have "height:100%;", then, any element in the page also using "height:100%;" will refer to the parent element. This should work. -Did you copy my entire posted code and try it? It worked for the test case I did on IE6 and Fx. :)
CodyTheGrate
04-12-2007, 10:12 AM
Ok, got it to work on another test page.

Thanks for all the help!! It is greatly appreciated!