WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Vertical Liquid Issue

Reply
  Thread Tools Display Modes
Old 7th December 10, 03:18 PM   #1
csharp72
WLC Member
 
Join Date: Dec 2010
Posts: 2
Default Vertical Liquid Issue

I'm attempting to create a layout with a fixed header and footer with a liquid, scrollable content container between them.
Something like this:

The problem is that I can't determine the height of the content window through percentages because the header and footer are fixed pixel heights. I've tried using combinations of positive and negative paddings and margins, but it doesn't play nice with the scrollbar.

Currently I'm solving the problem by calculating the correct pixel height through javascript, but I was wondering if there was a pure css solution to this.
csharp72 is offline   Reply With Quote
Old 7th December 10, 05:10 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Vertical Liquid Issue

you can't have a "liquid height" with scrollbars. Scrollbars on individual elements only trigger when the content length is greater than the FIXED height of the element.

For that layout to work you should specify the "header" and "footer" in percentages 10-15%, with a fixed percentage height of 100% - (header% + footer%)
Not forgetting to allow for padding, borders & margins as well. And apply 100% height to the body and html elements.
chrishirst is offline   Reply With Quote
Old 7th December 10, 05:40 PM   #3
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Vertical Liquid Issue

chris is absolutely right there, although you can set min heights on both your header/footer if you have content that needs to be a certain height.(ie a logo or similar)
Phreaddee is offline   Reply With Quote
Old 7th December 10, 09:46 PM   #4
csharp72
WLC Member
 
Join Date: Dec 2010
Posts: 2
Default Re: Vertical Liquid Issue

Unfortunately specifying the header and footer by percentages is not an option on this project.

What I need is a way to specify a percentage minus a pixel height, which I know is not possible.

So what I'm wondering is if there is a work-around that anyone knows of similar to the equal-height columns trick, where you can knock off some height from a div without directly setting the height attribute.
csharp72 is offline   Reply With Quote
Old 8th December 10, 05:43 AM   #5
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Vertical Liquid Issue

you can actually specify a height for both the footer and header as a pixel amount, and "guess" based on general average screen resolutions how much that would roughly equate to as a % and compensate your main content section accordingly. you then can make your body bg colour and footer bg colour the same colour so as to on screens where the "guess" is out by say a few %'s the footer appears larger, yet as a whole the whole page still appears as a 100% height. this concept I would assume would probably not work very efficiently on very small resolution screens, and would perhaps blow out substantially on some massive screens. but they are the opposite ends of the bell curve...

this is by no means an elegant approach and i'd still use a combination of min-height / % to achieve it personally. however its a work around. I'm sure that there is some javascript buffs out there that could offer a far more comprehensive solution but without using percentages, that is the best I can suggest.
Phreaddee is offline   Reply With Quote
Old 8th December 10, 08:29 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Vertical Liquid Issue

I agree there taking a "best guess" would be the answer.

You have to realise that not everybody will have their browser at full screen.
It is unlikely that the same person will be viewing the page at two different resolutions side by side.
AND unless your target audience are website layout designers nobody will ever notice.

I have this same kind of conversation with my son who is a designer and has the idea that every visitor to the page is a design critic and will notice that there is a 1 pixel difference in the top position of the content when viewed in Safari to it when viewed in Internet Explorer.

On the other hand, I, as a developer/programmer have to understand and accept that pixel perfection is not going to happen cross-browser or cross-OS platform and real people are never going to compare two or more browsers/OS/screen resolutions side by side. So if it isn't "broken" and looks pretty damn close it will do.

I learnt that cross browser perfection isn't necessary when, after spending days getting a layout exact, the client said "What's FireFox"??
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:25 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.