[CSS] height 100% + background image

[bastv]

Ik zit met een probleem. Als mijn content volledig op mijn scherm past ziet alles er goed uit.
Is de content langer (dus scrollbar) dan zie ik geen backgound image in het gedeelte wat bij het laden van de pagina niet te zien is. Zowel in IE7 als in Firefox
Beetje rare omschrijving maar plaatjes zeggen meer als woorden.



hier gaat het dus goed
http://www.kvz2000.nl/bas
en hier niet
http://www.kvz2000.nl/bas/longcontent.html

css is hier:
http://www.kvz2000.nl/bas/css/screen.css

[dominic]

Geen body height van 100% gebruiken.

[bastv]

dominic schreef op dinsdag 20 februari 2007 @ 18:41:
Geen body height van 100% gebruiken.

dan komt de footer niet onderaan de pagina te staan bij weinig content. (sticky footer)

[iworx]

Mik die 100% height maar weg, zolang die niet herberekend wordt bij het vergroten en verkleinen van je window dient die toch tot niets.

De enige manier om een sticky footer benedenaan de pagina te krijgen is via javascript en het continue berekenen van je windowsize.

Nu zeg je tegen de browser, 100% van het window. Als ik 'm groter maakt hangt er zo'n footertje halverwege de pagina.

En als ik 'm te klein maak volgt de background ook niet meer tijdens het vergroten.

Zeker geen bulletproof oplossing die je nu hebt.

[ Voor 6% gewijzigd door iworx op 20-02-2007 19:20 ]

[Rowanov]

dot.K schreef op dinsdag 20 februari 2007 @ 19:19:
Mik die 100% height maar weg, zolang die niet herberekend wordt bij het vergroten en verkleinen van je window dient die toch tot niets.

De enige manier om een sticky footer benedenaan de pagina te krijgen is via javascript en het continue berekenen van je windowsize.

Dat is niet waar, het kan met alleen css en mogelijk een conditional comment om in IE het zelfde resultaat te krijgen. Neem hier maar eens kijkje. Deze methode maakt de content van je website in feite 100% hoog, waardoor de footer buiten beeld zou verdwijnen. De footer haal je dan weer omhoog met een negatieve marge.

Wat je zegt over de 100% height klopt ook niet; de standaard is dat het element oprekt als je er meer in stopt, tenzij er een overflow gedefineerd is. Dit geldt iig voor elementen met relatieve afmetingen.

[akaIDIOT]

ben ik nu snel en dom aan het denken of is dit op te lossen door position:absolute en bottom:0 te gebruiken op die footer?

[Pendaco]

akaIDIOT schreef op dinsdag 20 februari 2007 @ 20:48:
ben ik nu snel en dom aan het denken of is dit op te lossen door position:absolute en bottom:0 te gebruiken op die footer?

Dat zou kunnen met weinig content, maar zodra er meer content in komt waardoor er een scrollbalk ontstaat blijft die footer staan en zal die over de tekst blijven staan, in plaats van dat ie naar beneden wordt gedrukt.

[bastv]

Rowanov schreef op dinsdag 20 februari 2007 @ 19:50:
[...]

Dat is niet waar, het kan met alleen css en mogelijk een conditional comment om in IE het zelfde resultaat te krijgen. Neem hier maar eens kijkje. Deze methode maakt de content van je website in feite 100% hoog, waardoor de footer buiten beeld zou verdwijnen. De footer haal je dan weer omhoog met een negatieve marge.

Wat je zegt over de 100% height klopt ook niet; de standaard is dat het element oprekt als je er meer in stopt, tenzij er een overflow gedefineerd is. Dit geldt iig voor elementen met relatieve afmetingen.

deze site heb ik ook gebruikt. zelfs de div naampjes zijn nog hetzelfde

maar weet niemand dan hoe ik dit oplos ?

[iworx]

Zelfs het voorbeeld van de man in blue werkt niet zoals het hoort :



trouwens, 100% height is sowieso deprecated in xhtml.

Browser-recalculation is een pest -- en ik gebruik Safari, Firefox en Opera.

[ Voor 34% gewijzigd door iworx op 20-02-2007 22:51 ]

[Rowanov]

Oh, je achtergrond repeaten, fixen en op je content mikken?