Can code determine monitor size?

[CatLady916]

I'm making this site: http://www.claylovesashley.com. I've applied a sticky footer method to the purple footer and the area with the three objects right above it. It originally wasn't this way but I noticed that when I view the site on a monitor that's pretty tall, there would be a gap between the object area above the footer and the footer itself.

Now with the object area inside the sticky footer area, the site has a big gap between the top half of the site and the bottom.

what can i do to fill the gap? i was thinking about pushing the top area down in the css, but i think if the site is viewed on a shorter monitor, items will overlap and that might turn out kinda ugly...i need a way to, i guess, have the site display two different ways depending on the height of the monitor it's being viewed in...

thanks!

[Beverleyh]

You could try this script here: http://fortes.com/projects/dynamiclayout/

It basically allows you to display different content/layout to different browser widths.

I use it as a bit of a gimmick here: http://temp.jemcon.org/
Just resize your browser and watch the top-right hand side of the screen to see the characters change.
(this is just a sample site for me to test new scripts so excuse the primative content - the real site is here: http://www.jemcon.org/ but you dont see the full range of characters/content until after login)

[jscheuer1]

Well, for something like that, where it is unimportant if additional images are seen or not, this sort of thing can be OK, fun even. However, even such an innocent use like this may break down in undesirable ways under unforeseen conditions.

But the original question had nothing to do with width, and although this probably could be adapted to height, if your page doesn't render acceptably in various window heights, you've simply coded it wrong in the first place. Standard HTML and css style should be able to be employed to resolve this, no javascript required.

People often overuse absolute and other types of positioning, and/or are afraid of the vertical scrollbar. If your page is too high for the user, let them shrink it, scroll it, or if possible resize their window. A footer need not be at the absolute bottom of the screen. It should simply follow the last bit of other content. My advice would be to get rid of this 'sticky footer' and use a normal one.

[djr33]

There are two reasonable ways to design a page (in terms of height):
1. Just make your page and let people use the vertical scrollbar to see it all. This is how almost all normal pages work, and it should probably be how your page works. There are very few times this will actually hurt the experience of using your website.

2. Instead, you could try to separate the elements in your site by having a static header at the top, a static footer at the bottom, and in the middle a div that scrolls (so only the middle of the page scrolls). This would be like using an iframe in the middle of the page, but since iframes cause problems you can just set this up using a div and some CSS. Basically, if the content of that div is too tall for the current window, it will scroll within itself, rather than moving the footer down as well.


In general, web design is about making your page fit into the standards of the internet, not about making the standards of the internet change so you can have a different kind of page. There are occasional exceptions to this, but ask yourself whether it really is crucial do to that.

For this particular page, I think that is fine.

The only other thing you can do to make this work better is to rethink the layout so that footer elements are moved higher. If there is important content in the footer, some users may not scroll down to see it, so consider moving it up to the top. For this reason a lot of headers have the title and navigation elements and many footers are just copyright notices (maybe with a copy of the navigation too). A footer is not really the place to put important things, so if you find that the footer is too important to be at the end, it is probably instead the content that should be moved up.