Webpage to Resize with Browser

HTML & CSS
1

I’m trying to make my webpage resize vertically with the user’s browser window. I created a little prototype to test with, essentially like my live site. Webpage has a PageTitle at the top, a Footer at the bottom and a text section in between that should have a vertical scroll bar. (My live site has a fixed height and works well - for that).

I got the overall size to work fine most of the time, with the Title at the top and the Footer staying at the bottom - and moving if the user resizes the browser window. Now I’m left with a problem with the center section. This MainContent section should be where everything expands and contracts, and also has a scrollbar.

How do I get the MainContent div to always cover the entire area between the title and the footer (even when there is little content), and never extend further down the page?

2

Hi,

Is this the sort of thing you are after?
http://www.pmob.co.uk/temp/hundredpercent-space2.htm

The header and footer in that example don’t have to be scrollable.

3

Thanks for pointing me to the perfect example. And, I guess, thanks to POB for creating it!

I’ve worked on this one problem a few times, and intensively over the last few days. I got various parts of the problem working but never all together. I found several posts that had some very different advice, so I’ll have to study this example further to understand why it works as it does.

The example includes “height: 100%” for body only. That was where I started, then did the same for some of the other style parts. Nothing seemed to work as expected. Then a number of postings I found said to set “html height: 100%” so that “body” would have something to be 100% of. Made sense. Even improved some things. I see you don’t have that and it still works.

I’m curious too, about the alternate styling for IE. I’ve been working primarily in Firefox but also checking in IE. Maybe that IE code (and the example) has been around for a while, and addresses an older version. Any idea?

4

Hi, since the wrapper is an absolute element the height:100% I believe will be for IE7 or something. I haven’t tested that site at all but some very simple testing (taking it out then checkign every browser) would not take long at all, so you could see if any adverse side effects happen