[CSS] height 100% + background image

Pagina: 1
Acties:

  • bastv
  • Registratie: September 2005
  • Laatst online: 24-11 20:50
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.

Afbeeldingslocatie: http://img468.imageshack.us/img468/6318/rarebugra3.th.jpg

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
  • Registratie: Juli 2000
  • Laatst online: 27-11 20:08

dominic

will code for food

Geen body height van 100% gebruiken.

Download my music on SoundCloud


  • bastv
  • Registratie: September 2005
  • Laatst online: 24-11 20:50
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
  • Registratie: Juli 2001
  • Laatst online: 14:27
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.

Afbeeldingslocatie: http://www.iworxmedia.net/got/faulty_background.png

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

This space intentionally left blank.


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

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
  • Registratie: Januari 2005
  • Laatst online: 03-10 23:33
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?

*stu!ter* *boink*


  • Pendaco
  • Registratie: Augustus 2003
  • Laatst online: 11:57

Pendaco

Vogon Poetry FTW!

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
  • Registratie: September 2005
  • Laatst online: 24-11 20:50
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
  • Registratie: Juli 2001
  • Laatst online: 14:27
Zelfs het voorbeeld van de man in blue werkt niet zoals het hoort :

Afbeeldingslocatie: http://www.iworxmedia.net/got/maninblue.png

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 ]

This space intentionally left blank.


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Oh, je achtergrond repeaten, fixen en op je content mikken?
Pagina: 1