[CSS] Semi-sticky div

[GrimaceODespair]

Ik probeer een design klaar te stomen met volgend gedrag op verschillende viewportgroottes:

code:

 --------
| div.A  |
|/      \|
 --------

code:

 --------
|\      /|
| div.A  |
|/      \|
 --------

code:

 --------
|\      /|
| div.A  |
|/      \|
 --------
|        |
 --------

Maw: de div moet tegen de onderkant van de browser plakken zolang de viewport te klein is. Wanneer de viewport groot genoeg wordt voor de hele div, moet hij aan de bovenkant blijven hangen.

Met JS zal me dit wel lukken, maar ik probeer een oplossing te bekomen met CSS. Misschien is de oplossing zo simpel dat ik hem over het hoofd zie, maar ik kan me geen combinatie van HTML + CSS bedenken waarmee ik dit voor elkaar krijg (dus elke "wat heb je al geprobeerd?"-opmerking moet ik afketsen ).

[MueR]

Totdat media queries in alle browsers (lees: IE) geimplementeerd zijn, zal je JS nodig hebben.

[Bosmonster]

Je kunt wel iets bereiken met max-height van die div.A, maar dat werkt natuurlijk niet in IE6.

[GrimaceODespair]

Bosmonster schreef op woensdag 02 juni 2010 @ 13:48:
Je kunt wel iets bereiken met max-height van die div.A, maar dat werkt natuurlijk niet in IE6.

Als het dat maar is IE6 is geen prio en wil ik eventueel wel nog fixen met js.

[Arjen Tempel]

Neem een div met height 100% en max-height bijv. 400px.
Plaats binnen deze div een tweede div met height 400px en plaats deze absoluut onderin de eerste div.
Voorbeeld: http://www.csbtempel.nl/got/sticky.htm

[GrimaceODespair]

Arjen Tempel schreef op woensdag 02 juni 2010 @ 14:22:
Neem een div met height 100% en max-height bijv. 400px.
Plaats binnen deze div een tweede div met height 400px en plaats deze absoluut onderin de eerste div.
Voorbeeld: http://www.csbtempel.nl/got/sticky.htm

Zo kant-en-klaar hoefde het nu ook weer niet, maar je bent een held

Alleen in Chrome duwt-ie div.a niet helemaal tegen de bodem, maar daar ga ik zelf wel achteraan

_{En natuurlijk ook nog wat credits aan Bosmonster die dezelfde richting uitwees}

[Bosmonster]

Arjen Tempel schreef op woensdag 02 juni 2010 @ 14:22:
Neem een div met height 100% en max-height bijv. 400px.
Plaats binnen deze div een tweede div met height 400px en plaats deze absoluut onderin de eerste div.
Voorbeeld: http://www.csbtempel.nl/got/sticky.htm

Waarom de rest?

Gewoon een div bovenin je pagina met max- en min-height is genoeg. Die op position relative en daarin die div die op de onderkant zweeft.

Height: 100% is iets dat je zelden of nooit nodig hebt.