...

View Full Version : make a div height 100%



ptrcao
12-15-2010, 07:38 AM
http://www.mathannotated.com/index.html

The main contents box surrounded by a navy border - how to make its height aways 100% of page? This doesn't seem to work; just me?


div.content {
border: #333399 solid 3px;
clear: left;
padding: 1em;
height: 100%;
}

abduraooft
12-15-2010, 07:46 AM
You'd need to use the faux column technique (http://www.alistapart.com/articles/fauxcolumns/).

ptrcao
12-15-2010, 09:38 AM
You'd need to use the faux column technique (http://www.alistapart.com/articles/fauxcolumns/).

There is another technique I have been trying which I am more favourably disposed towards. However it does not work for me: are you familiar with setting the parent div (html or body) to a min-height of 100% which apparently allows the child div to inherit a height dimension?

Besides it's the border that I want, not the background to span right down to the bottom of the page, so not sure how to make the faux background technique work for me.

ptrcao
12-15-2010, 01:28 PM
i could still use some help. visit http://www.mathannotated.com/index.html and see if you can help extend the central column's borders down to bottom of page without the use of a faux background.

CSS:



div.content {
border: #333399 solid 3px;
clear: left;
padding: 1em;
min-height: 100%;
}


Edit: Note that I don't want the borders to actually be extended upwards to the top of the page; the upper border is already where I want it, for obvious reasons when you've seen it.

Edit: The contents of the page height is dynamic so setting a fixed hight is not an option.

ptrcao
12-15-2010, 08:17 PM
I'm reading everywhere online that if you set the parent div to 100% that solves the problem.

My code is clean but still this approach is not working for me.

I want the border on this:

div.content {
border: #333399 solid 3px;
clear: left;
padding: 1em;
min-height: 100%;
}

It's parent, also the parent of two other child divs one of which is taller than the div I want the border on, is set as

div.heightonehundred {
height: 100%;
overflow: hidden;
}

http://www.mathannotated.com/index.html

According to online guides this should work. Well, not for me.

Note: Mine is a variation of the standard case as I do not want the div to span the entire page, only from the horizontal menu to the bottom of the page.

Anybody?

ptrcao
12-17-2010, 09:12 PM
This problem is not yet resolved. Bump.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum