Page Resizing Vertically

Hi to everyone,
I am a newbie, dropped by chance in your forum. I started webmastering since few weeks (so you can imagine how much I am skilled).

I have almost the same problem, as cerio here:

http://www.ozzu.com/website-design-forum/page-resizing-with-browser-t21313.html

but I want my site to resize vertically - not horizontally. I used the code posted by digitalMedia and modified it in order to make it work vertically but --- it does not work . Probably I mistaken something. Tell me please where are my errors:



Basically I want a compact site, a site that may occupy (more or less) the whole browser (both in 800x600 and 1024x768 resolutions), without requiring to scroll down the page to see its hidden content. I thought it would have been a good idea to use resizing cells to expand "useless" spaces and fill the browser. But any different suggestion would be more then appreciated .
Thanks for your help!

Aner

Make one of the heights within a <td> tag, height="600". That will stretch it out for 800x600 users for now.

Relative 'newbie' myself - hopefully one of the big boys will jump in!

I am assuming you want the site to fill the browser window as opposed to the table in this reply.

I did some scribbling there and came up with this:



Basically this produces a page with three parts - a title, footer and content area. I'm not sure if you have a footer, but it doesn't matter if you do or not.

What you need to do is set the heights of the title area(and footer if you have one) to a pre-set number of pixels, so they are fixed.

However the 'content' div needs to be set to a % of the browser window so it expands. Use the following as a rough guide:


key:
H+F = Combined Height of 'header' and 'footer' in pixels.
C = Height of 'Content' in %.
PH600 = % of 800x600 height filled.
PH768 = % of 1024x768 height filled.

(Rules)
(1) H+F = 50px; C = 91%; PH600=99%; PH768=98%;
(2) H+F = 100px; C = 83%; PH600=100%; PH768=96%;
(3) H+F = 150px; C = 75%; PH600=100%; PH768=95%;
(4) H+F = 200px; C = 66%; PH600=99%; PH768=92%;
(5) H+F = 250px; C = 58%; PH600=100%; PH768=91%;
(6) H+F = 300px; C = 50%; PH600=100%; PH768=89%;

So for the example I inserted at the top, the combined height of my header and footer was 150px, so I set the height of my 'Content' div to 75% per Rule(3) above. This will fill the height of an 800x600 page to 100% of the screen and fill a 1024x768 page to 95% of the screen.

Note, say I didn't want a footer and my header was still 100px high, I would set 'Content' height to 83% (per Rule(2) above). Then 100% of 800x600, and 96% of 1024x768 height would be filled.

As you can see the more space your header and footer take up, the worse this is for the larger resolution. Not perfect but should do your trick. You can play around with the numbers above but I the % I have stated are as far as I know the best which will best satisfy both resolutions at the same time.

lionking:You might want to test that code in a browser other than IE.

btw:H7?

Aner: What's not working for you? Your code works in all of my browsers except for Opera 7.01. Opera doesn't recognize the height attribute.

Should have put that disclaimer on shouldn't I! Note...

Table cells will ALWAYS expand vertically to accomodate content.

For instance, you can set a table cell to a width of 200 and a height of 600, but if the content of that cell requires more than 600 pixels in height, the table cell WILL expand vertically. If you want the site to remain stationary and only have the content of the cell scroll, you will need to use an iframe in the cell or use some javascript/dhtml content wrapper.

I think that the original post was aimed at making the cell/page as big as the browser window, even if there is only a small amount of data in the cell:?:

Lionking: That's what I thought at first too, but the above quote does not reflect that.

well - yes, my aim is to expand an empty cell more or less...

the other things I said about scrolling down and so on - were just a general declaration of what I'd like to obtain at the end. even if my most urgent problem, for now, is "simply" to expand the cells vertically to fit the browser.

digitalmedia: my code is "not working" because the middle cell never expands. - it always remains pressed on the text.

lionking: thanks a lot for your help, now I am going to study more carefully your suggestions, and try them.

I am starting to wonder if html allows to stretch empty cells...

http://www.chriscarney.com/cleanMe/vertTable001.gif
http://www.chriscarney.com/cleanMe/vertTable002.gif
http://www.chriscarney.com/cleanMe/vertTable003.gif
http://www.chriscarney.com/cleanMe/vertTable004.gif

Your code works in IE and FireFox.

I'm guessing you're confused because the string, "MIDDLE LINE" is v-aligning in the middle of its cell, which is the default for HTML 4.01.

Digitalmedia:
now I am really surprised - cause, I see that I cannot obtain the same results you showed in those .gif files, even after copying the code you gave me

I copyed exactly the same code you used, but - I still have the "MIDDLE LINE's cell" collapsed on the text 'MIDDLE LINE'... differently from you (and you're obtaining precisely the effect I'd want for me!)

hmmm... same code - but different effects on IE (mine is 6.0.2 vers.). how can be possible? maybe Macromedia Dreamweaver MX 2004 (the program I installed and I am using) messed things up somehow?

Hmmmm, this is interesting. I'd like to know what the difference is.

I'm using IE build 6.0.2800.1106. I, too, have Dreamweaver installed on my computer.

I don't know of any settings within IE that would cause it to react differently.

I've looked at this for a while now, and I can't get the page to do ANYTING differently in my browsers. I've tried various DOCTYPES, etc.

The only thing I can find that might be a variable is your accessibility settings. If you were using your own style sheet that for some reason set TD heights. Unlikely, I would guess.

really thanks for your efforts Digitalmedia

really strange, anyway... tonight I will try again that code on some other computers, to experiment what type of results I am getting

it's even more frustrating - knowing that the "middle cell" is expanding on someone else's monitor. But I won't give up so easly! even if this will cost me to format hd

the only thing clear is that - now I have one more reason to trash this misterious box full of metallic garbage (my computer...).