content resizes to window size (was in css & javascript forum)

[mieche]

I've seen this done in a few different places where the background image resizes to fit the window...I'm wondering if there is a way for this to work for the entire page of a portfolio site so the header, main image and footer always fit on the page...hope that makes sense.

Obviously there would need to be a minimum height, but what I need is for the height to fit the users window size so there is no scrolling...

The site I'm creating won't have a background image, but that is the only way I have seen it done so far.

Paul from the Javascript forum suggested checking in here for about achieving 100% height.

[Paul O'B]

Hi,

It depends on exactly what dynamics you need.

You obviously can't have a site that fits all windows without scaling all the elements and that would be silly anyway.

If you just want a background that fills the viewport height then you are probably looking at a sticky footer effect. You can read up on it in the CSS faq (see link in my sig - there is also a faq on 100% height you may find useful).

If on the other hand you want a header and footer always fixed to the top and bottom of the viewport then you are looking at fixed positioning which is something different again.

We'd need to see a picture of your design and what you would expect to happen to the layout at various sizes.

Suffice to say that usually doing none of the above is the best approach and content should dictate what the page looks like Just let it flow and adjust to screen sizes automatically. Everyone expects to scroll vertically so there is no need to avoid this.

[mieche]

Thanks Paul,

Unfortunately my photographer clients prefer sites that do not scroll vertically. My latest client is asking if it is possible to have everything (header, footer, content) adjust to the users window height...I'm still trying to determine if he is just concerned with the home page or if this is something he would like on all pages.

The site I am creating will not have a background image...you are welcome to take a look at the current pages at Wegle Photography

Since this is not my first client to express concern about scrolling I figured it is best to start looking into options other than designing to a 600px max height.

[Paul O'B]

Hi,

You could certainly use media queries to swap background images for smaller background images depending on the sites width and height. It would be a little awkward to change any foreground images without using scripting of some sort.

Here's some links that show media queries in action.

Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks
CSS3 Media Queries and creating adaptive layouts - Robert's talk
CSS3: Media Queries: width and height // Think Vitamin Membership

Media queries don't work in ie8 and under though and you;d have to supplement it with some js for IE8 and under.

You can scale images with css but the results aren't generally that good and do depend on the image used.

CSS Proportional Image Scale - CSS Tutorials - hasLayout.net by Zoffix Znet

Or you could use javascript as in this example.

jquery.imagefit: JavaScript to proportionally scale images to fit

If your clients don't like scrolling then perhaps they can show you a site that performs the way they want. It seems that they are looking for something like a flash site instead.

I'd be inclined to use a fixed header and footer and then use either javascript scaling or css scaling to scale the image within the remaining space. The image quality may suffer though.

[mieche]

Thanks Paul,

The javascript/jquery link you provided looks like it might be what I want.

I think I may have miss worded what I am looking for, but just to be extremely clear...there is no background image on the site I am creating...I was just using it as an example!

[paul_wilkins]

Given a standard three-level vertical split of header/content/footer, is it possible for CSS to to give the content a flexible vertical height, so that the footer always remains at the bottom of the page?

[Paul O'B]

You can do something like this with css only. It really needs tidying up and tying into that javsascript resize routine I posted earlier.

I assume this was the sort of think that was required?

[Paul O'B]

Here was my attempt at adding a little js to resize the image but needs Paul W's magic touch as I don't think the logic is sound (and of course needs to be made to work on multiple images and not just the one image).

[mieche]

Yes this is exactly what I have been thinking of!!! Thank you.

Now to see if I can get it to work with my site.

[mieche]

Ok, hopefully one last question...I've got everything working except for the right side border...I'm not sure why it is not coming up? Any suggestions?

Wegle Photography

[mieche]

I found the fix for the border.

As I'm continuing to play with this I'm wondering if it really is the right thing as it doesn't seem like the image is resizing so much as the footer is covering it up...not really what I'm after, I want to see the whole image.

[Paul O'B]

Hi,

The border makes the image too big and the bottom of the image is being hidden by the overflow:hidden anyway.

I've added a border to my example but you need to keep the same format.

The new version is here.

The element with class="x" is the trick that vertically aligns the image and cannot be omitted.

The page will work without javascript but the image won't scale as nicely. The js checks if the height is too tall abd if so makes sure the width of the image doesn't keep getting any wider.

[Paul O'B]

I found the fix for the border.

As I'm continuing to play with this I'm wondering if it really is the right thing as it doesn't seem like the image is resizing so much as the footer is covering it up...not really what I'm after, I want to see the whole image.

Yes that's because you omitted the important bits from my routine and basically you are just hiding the image whereas mine is being scaled within limits and vertically centred.

See my above demo for the latest code.

[mieche]

Paul I really appreciate all your help, but I still cannot seem to get this working. I have added the javascript and the x class, but still no bueno. Does the fact that this site is in wordpress make any difference?

[paul_wilkins]

Here was my attempt at adding a little js to resize the image but needs Paul W's magic touch as I don't think the logic is sound (and of course needs to be made to work on multiple images and not just the one image).

It it was in a code review there would be a few improvements to make there, but the logic of what's happening does appear to be sound.

In light of the recent comment from the OP, I'll see if the good folks in the Wordpress forum have anything to add.

[mieche]

Thanks for the move Paul W...I appreciate all the help and hard work both of you have given me on this situation. I didn't realize there was a wordpress forum, hooray!

[Paul O'B]

Hi,

Yes I've no idea how you will implement this in wordpress but you do need to maintain the structure I've given.

specifically this section.

<div id="outer"> 	<div class="content"><b class="x"></b><img  id="theImage" class="test" title="Audi A3" src="images/carscale.jpg" alt=""/></div> </div>

If you nest extra elements or don't keep the b element next to the image then you break the structure. As soon as you nest another element you break the routines because there is no longer any height to work with.

You need to strip away everything that is not needed and end up with a structure as in my example above which shows that it will work once everything is in the right place.

#outer contains the available space between footer and image and the class="x" must be 100% height of this space because it then forces the image to vertical-align within that space. (See here for the details of the technique).

If you add extra nested elements inside then you break that relationship and nothing will align.

[mieche]

Paul O'B...thanks again for all your help, but unfortunately I can't change the structure of wordpress so hopefully someone here will be able to help.

I'm using Thematic framework with a child theme for my customizations.

[Paul O'B]

If you post the minimum html that you have to work with I'll see if it's possible to fit what's needed into your structure.

[mieche]

ugh...I'm headed to redesign. Thank you so much for the help, I truly, truly appreciate it. Hopefully after redesign the client won't be throwing any other curveballs my way.