Div height as % that doesn't change with window resize

[timo222]

Is it possible to specify the height of a div as a percentage but as a reference to the full screen viewable area rather than the size if the user has shrunk the window? This is to make a page better proportioned at different screen resolutions.

Cheers
Tim

[Xapti]

This is an ultra-strange query, I'll explain:
First of all, it's rare any webpage ever has any height restriction at all, due to the way content is designed to flow. Things get cut off when it comes to dynamic content, and user-set font sizes.
Second, how does adjusting height to screen size make the site better proportioned? If their screen resolution is small though, the content would not fit on their browser, because it would get cut off by the limited height assigned.

You should either explain the reason for wanting this, or reconsider why in the world you'd want to do such a silly thing.\

To answer the question, it cannot be done with CSS. Javascript can detect screen resolutions, but it's not a good thing to be doing (even for real reasons).

[timo222]

I am making a site for a friend who is a childrens entertainer, and I was thinking of styling it as a punch and judy booth (google it for a picture), as that is one of the things he does.

To that end there would be an image across the top, the "stage" bit would be where the content would go and then at the bottom there would be another div with an image for the bottom of the stage and a background that would run down to the bottom, so the whole booth takes up 100% height of the screen.

I was wanting to have the whole booth viewable on screen without scrolling which is why I have used a % height rather than set pixels, so the content area fits at 800x600 but isn't stupidly small at 1280x1024 and you can still see the image below, and the repeated background which is set to run off the bottom of the page with overflow:hidden in the body style so it won't allow the user to see all of it.

I just wondered if it was possible to set the page up and not have it resize itself with the browser window at a certain resolution because it can make it look a bit rubbish if it goes too small, but thats the users fault I guess. Ideally I would use position:fixed to do everything, but thats just not a viable option.

Cheers
Tim

[Xapti]

It would be the user's fault if they wanted to view it at a small size, yes. I would recommend not to worry about sizing it to the screen, since even if it was sized to the screen, the page will still need to be scrolled unless they make the window full sized. Whether the page just appears small, or whether it's "cropped" with scrolling, they should intuitively increase their browser window size. Typically people at lower resolutions run at full screen anyways, because they don't have the space to run windowed.

The one thing that may not be too bad to implement, is Javascript to resize the browser window to full size. Not all users have this allowed for their Javascript settings though (it's an option you can control in Firefox, for instance)