height stretching past view point [Archive]

Click to See Complete Forum and Search --> : height stretching past view point

Fashy

01-29-2010, 08:36 AM

I would like some advice as to what you guys would do here. I am revamping my portfolio; however I am having some trouble with height. I know this issue is always brought up but I am having difficulties with the container height stretching past view point. Even thought its set at 100% in the body and container it doesn’t stretch down to the bottom of the page and the background will be textured so I don’t think I can do the background trick. I was reading this page that is the issue I am having: http://www.geekicon.net/thinktank/index.shtml/article/643

but i don’t fully understand it and I don’t really like using absolute/relative positioning. Can this not be done any other way?

html, body {
font: normal 12px verdana,arial,helvetica,sans-serif;
color:#000;
height: 100%;
background-color:#000000;
}
#container {
width: 1006px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color:#0099FF;
}

Webnerd

01-29-2010, 07:34 PM

You can't stretch past the view point by setting the HTML height to 100%. By default, the HTML height is "auto", so that it can fit it's content, however large.

You are saying you want 2 background colors? There may be an easier approach.

WestWeb

01-31-2010, 12:40 PM

I'm a little bit confused by your statement here:
"I am having difficulties with the container height stretching past view point. Even thought its set at 100% in the body and container it doesn’t stretch down to the bottom of the page".

But, assuming you want the container to stretch the full height(top to bottom) of the browser window, I would imagine you just need to take away the margin and padding from your <body> element. add this to your body styles:

margin: 0px;
padding: 0px;

You should also replace the two margin-left and margin-right tags in your #container styles with this:

margin: 0px auto;

this will set the top and bottom margins to 0px and the left and right to auto.

Or, assuming you want the container to stretch beyond the bottom of the browser window, you could set a minimum height for the container or the element holding your content. You would have to adjust the height for your purposes of course.

min-height: 768px;

You should also set the #container min-height if you have floated content and the container is not wrapping around(is shorter than) the content.

I hope I'm somewhere on the right track to helping you.