[simphax]

Hej! Jag håller på med en avancerad layout för min personliga webbplats. Den består av tre vertikala kolumner enligt bilden nedan:

Den blå och gula kolumnen ska fylla allt område som den vita kolumnen inte fyller. Men är vita kolumnen större än webbläsarfönstret så ska den blåa och gula kolumnen ändå ha någon slags minheight, eftersom de kommer innehålla meny och fotnoter. Som exemplet nedan:

Vita kolumnen ska även kunna bli 0 i height och de blå och gula kolumnerna ska då täcka hela webbläsarfönstret, som exemplet nedan:


Hur gör man detta med en XHTML/CSS layout?
Alla tankar, ideer och länkar är till hjälp!

[Hjalmarsson]

Kan du visuellt visa hur det ser ut? Svårt att säga ett generellt sätt då det inte finns något.. Men rakt över huvudet så skulle jag säga först ha headern som bakgrund vertikalt centrera din content (*edit* jag yrar lite) div sen hacka till footer med padding och negative margins och overflow: hidden; på wrappern.

Men som sagt bara något som snabbt rullade i tankarna nu, kan ge det större tanke om man får se designen och var och hur header/footer text ska ligga etc.

Annars är ju javascript alltid ett alternativ.

*edit* yrar lite... trötthet, men har du mer och visa så kan du ändå få en mer utförlig åsik ^^

[Mortekai]

Knepigt upplägg, men om du positionerar gul och blå med absolut och fäster högst upp respektive längst ner och sedan lägger en min-height på dom så kan det kanske gå...

[simphax]

Tack för snabba svar!
Jag har fått ihop layouten hyfsat på http://simphax.com/portal/
CSS på http://simphax.com/portal/layout.css
Där använder jag height 50% på övre samt undre kolumnen vilket inte ger rätt effekt då man förstorar mittenkolumnen.
Meningen är att innehållet ska laddas med ajax och medans det laddar ska mittenkolumnen animeras till 0 i height och jag vill att övre och nedre kolumn ska följa med så att de täcker hela sidan. Sedan när det laddats klart ska mittenkolumnen rulla upp igen och height blir så mycket så att allt innehåll får plats.
blev lite flummigt men iaf ^^ kolla på länken.

[Knalli]

min-height 50% på huvudet å foten kanske? http://ryanfait.com/sticky-footer/ fast 50% istället? Fast hur det ser ut om sidan är större vette fan. Bara experimentera, det brukar oftast lösa mina problem :P

[allstars]

kan du inte ha en bakgrundsbild med blått/gult och så innehållet har en vit bakgrund(sfärg)?

[Hjalmarsson]

Varför inte använda javascript då?

Ta ut höjden på fönstret samt content wrappern (vet du de så vet du ju höjden för resten), sen animerar du ju respektive på ett event. Kan du ju ha både headern och footer absolute positionerade över content.

[Mortekai]

Height är ju en knepig variabel....min-height 50% skulle jag nog också köra...

[Hjalmarsson]

Originally posted by Mortekai@Aug 18 2009, 14:57
Height är ju en knepig variabel....min-height 50% skulle jag nog också köra...

Beror väl på vilka webbläsare man vill stödja.. IE6 vet inte vad min-height är och IE7 tolkar min-height som height. (samma gäller då min-width, max-width, max-height) kul va?

[Mortekai]

IE6 bryr jag mig inte om...den är "obsolete" och ska bort,bort,bort.

Kanske istället lägga en marginal på den vita divtaggen top och botten, fast då måste gul/blå ha en negativ marginal mot den vita för att det inte ska bli glapp....kan det fungera?