100% Height

Get Started
1

I have seen many websites that have this 100% height on their page, and I searched on Google but non of the solutions I have found actually work.

I want to have a page that has a navbar on the left side but I want the background color of the navbar a different color and I want it to stretch all the way to the bottom of the browser window. Right now it only goes to the bottom of the text. So if there isn’t much text on the page they are viewing it looks stupid.

I also like that fixed look where the center of the web page is a different color and it strecthes all the way to th bottom of the window, even if the entire page doesn’t have text on it.

I guess there must be some secret trick because using height: 100% does not work like the articles on Google said it would.

Edit: For example go to www.infotech.com and you can see they have this center of the web page looks like it stands out, and goes all the way down to the bottom even if there isn’t enough content to fill the page. I want something like this, but I can’t tell if they did this with images or what. I can’t believe that entire page would be an image. It all blends in nicely, and looks good. I can’t find anything that replicate that.

Even when I maximuze the window this style still looks good.

2

Oh, I see. I kinda thought that but I wasn’t sure. It is confusing me how they are doing that.

So you are saying that entire raised porition at the top of the page, that goes about 1/4 way down the page is actually an image?

I thought it was a div with the left and right border property set.

Then I seen the tab links in the top navbar so I didn’t think it was an image. I didn’t know you could make an image do that.

3

I notice too it looks like the center of the page is maybe a DIV with border width set, but if you follow the border down the page it fades into the background. So I think this much be an image, but I don’t know how to use an image for a border.

I see websites like this all the time and they confuse me how they were put together.

4

If you mean the gradient of the infotech page I would create a gradient background image, then whatever colour your gradient goes to for instance #FFFFFF I would set #FFFFFF as the page background colour.

I may not be understanding your question?

5

check out a site I did a few months ago. I think it has what you are looking for. I have 100% height and use a gradient background.

Should be a good starting point for you.

http://www.udel.edu/bluehenmarket/