Determining the height of the browser window

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Nathan Sokalski - 10 Dec 2007 01:21 GMT

The layout for my site is two primary areas: a title bar and a content area.
The title bar is a Panel with a fixed height. The content area is a Panel
that does not have a fixed height. I would like the content area to take up
the entire remaining height of the browser. This brings up two scenarios:

1. The content does not require the entire remaining height, which would
require setting the height to <browserheight>-<titlebarheight>

2. The content does require the entire remaining height or more, in which we
do not need to set the height at all

The first problem is determining what height is required by the content
area, since this can vary by browser. The second problem is determing the
browser height. Can anybody help me here? I have heard about the CSS
min-height property, but it is not yet supported by most browsers, so it
does not help me here. Thanks.

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

Reply to this Message

Mark Rae [MVP] - 10 Dec 2007 02:18 GMT

[cross-posting removed]

> The second problem is determing the browser height.

http://www.google.co.uk/search?sourceid=navclient&hl=en-GB&ie=UTF-8&rlz=1T4GZEZ_
en-GBGB252GB252&q=JavaScript+%22screen%2eheight%22

Signature

Mark Rae
ASP.NET MVP
http://www.markrae.net

Reply to this Message

Anthony Jones - 11 Dec 2007 17:46 GMT

> The layout for my site is two primary areas: a title bar and a content area.
> The title bar is a Panel with a fixed height. The content area is a Panel
[quoted text clipped - 3 lines]
> 1. The content does not require the entire remaining height, which would
> require setting the height to <browserheight>-<titlebarheight>

Thats a little confusing. Why would you want to do that is the content
doesn't need it?

> 2. The content does require the entire remaining height or more, in which we
> do not need to set the height at all

I'm not sure why you need to set a height at all?

> The first problem is determining what height is required by the content
> area, since this can vary by browser. The second problem is determing the
> browser height. Can anybody help me here? I have heard about the CSS
> min-height property, but it is not yet supported by most browsers, so it
> does not help me here. Thanks.

True for cross broswer (esp for IE6 support you can't use min-height).

What DTD are you using?

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Nathan Sokalski - 12 Dec 2007 01:30 GMT

Perhaps everything will be clearer if you look at my current site
(http://www.nathansokalski.com/). If you look at the navigation on the left
side of the screen, you will notice that the gray background does not extend
to the bottom of the browser window. I feel this makes the page look
somewhat ugly. For example, compare the following two pages:

http://www.nathansokalski.com/index.aspx

http://www.nathansokalski.com/poetry/viewpoem.aspx?poem=The+Night+Before+Finals

The content on the first page does not extend to the bottom of the browser
window, making the navigation background look like nothing more than a gray
rectangle. The content on the second page, on the other hand, does extend to
the bottom of the browser window, making the navigation background look more
like an area that is dedicated to the navigation. This is why I need to
dynamically set the height. I am using the following DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hopefully this makes my goals a little clearer. Thanks.

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

>> The layout for my site is two primary areas: a title bar and a content
> area.
[quoted text clipped - 24 lines]
>
> What DTD are you using?

Reply to this Message

Determining the height of the browser window

Free Magazines