Is there anyways to find the actual height & apply it to CSS?

Is there anyways to find the actual height & apply it to CSS?

I have 100% height problems in my DIV & CSS design. So I was wondering if there is a script that I can use to find the actual height of every page and apply it to the DIVs in the page...


Thanks
Nima

 

Edit: Sorry, I realized you said page, not window.

Do you have an example of what you mean?

 

Hmm..

I've heard about it, but never saw any code myself...

Look at my code here: pokereagles.com/poker-movies/

The left menu height is not 100% and from what I have understood is it is almost impossible to fix it with height:100%;

I was thinking if I could somehow get the actual of height each page when it is loaded and apply that to the left menu and Main-Content it would be fixed...

Thanks
Nima

 

One just has to get inside the mind of those wacky styles and work around their twisted logic.

Try this:

#wrapper 
{
	width: 800px;
	margin-left:auto;
	margin-right: auto;
	margin-top:100px;
	background: white;
}

#main {
	background: #eaeaea;
	border:5px solid #FFFFFF;
	padding:5px;
	width:620px;
	margin-left: 160px;
}
  
#nav-one {
	width:150px;
	background: #f5f5f5;
	border:5px solid #FFFFFF;
	position: absolute;
	top: 100px;
}

Code (markup):

 

That doesnt fix the height problem though. It just ads white background

 

Actually I just did that and tweaked it a little. It works great, except the background color is not showing up in Firefox. Any idea why?

Thanks
NIma

 

It uses a different technique so that wrapper wraps around main (it didn't before because of the float) and position nav-one to the top left of wrapper. Now wrapper has the correct height and you can use height: 100% (although with some fiddling around with this value, and play around with the margins to make it look right).

Edit: Mmm... It should work in Firefox as well. I made a copy on your site in my local system to play with the css and it shows fine in both Firefox and IE.

 

Its weired...

Look at the front page: http://www.pokereagles.com/

The white background doesn't show up in FF but it does in IE.

 

The issue isn't about 100% heights, a Bad Idea®, it's about making two columns appear to be the same height. Google for "faux columns"; ALA has the seminal article. You may see an example at my http://garyblue.port5.com/webdev/2col.html

Plus there is the issue of enclosing float elements. IE, in defiance of the standards (what else is new?), encloses floats whose parent has hasLayout==true.

In the example you cited, IE seems OK, only because it's screwed up. Firefox is rendering correctly as coded.

cheers,

gary

 

well,

is there a solution for this problem?

 

Did you read the references I gave you?

gary

 

None of those links work

 

Hi Nima,

What exactly are you trying to do (if you don't mind me asking)? Are you looking for a 100% document height for a multi-column layout that will have different background colors without having to use a background image to fake it (yes, this can be done, but it requires some advanced CSS skills and a lot of knowledge about how negative margins work and the cross-browser issues related with them).

 

Dan,
I dont want to fake the backgrounds. Rather, I prefer not to (unless I dont have a choice).

The ideal situation is to have 100% height for the two columns (that have different backgrounds). I simply want them to have the same height...

Nima

 

Ok, that's going to require the use of negative margins and some clever use of floats then. Can you wait until I get home?

 

Dan,
I would really appreciate if you can help me out. I did a lot of reading and fixed my other CSS problems. but I'm stuck in this one...

Thanks again,
Nima