[css] Footer in container, altijd onderaan de pagina

[Verwijderd]

De laatste tijd ben ik enthousiast aan de slag met CSS, en probeer tegenwoordig mijn sites geheel zonder tabellen te bouwen. Nou gaat me dat vrij aardig af, maar nu heb ik een probleem wat met tabellen een eitje zou zijn, maar wat ik met CSS niet voor elkaar krijg, of gewoon niet mogelijk is...

In tabelvorm zou dat er ongeveer zo uit zien:

code:

<table width="760" height="100%" align="center">
  <tr>
    <td>content, content</td>
  </tr>
  <tr>
    <td height="20">dit is de footer</td>
   </tr>
</table>

Is er dus weinig tekst in het content gedeelte, dan zal het footer gedeelte onderaan het scherm te vinden zijn. Is er veel tekst ik het content gedeelte, dan schuift de footer automatisch met de tekst mee. Misschien moet je de pagina naar beneden scrollen, maar de footer is weer helemaal onderaan de pagina te vinden...

Goed, ik heb vanalles geprobeerd om dit effect ook in css voor elkaar te krijgen, en vele pagina's over dit onderwerp bekeken, maar het is me dus niet gelukt. Het moet zowiezo goed werken onder Mozilla en IE, en dat zonder javascript of tabellen, gewoon met CSS.

Is dit nou gewoonweg niet mogelijk, of is er misschien toch een mogelijkheid?
De content en footer moeten gecentreerd en 760px breed zijn.

Alvast bedankt...

[Verwijderd]

Kijk eens na of je hosting pakket geen Virtual Includes ondersteund. Desgevallend kan je gewoon een html code laten verschijnen onder je normale webpagina.

[Rickets]

Dat is volgens mij niet mogelijk met CSS. Zie ook http://www.xs4all.nl/~ppk/css2tests/100percheight.html

quote: http://www.xs4all.nl/~ppk/css2tests/100percheight.html

For instance, if you want to make an element as high as the entire page (whatever this height may be) you're out of luck.

[Grijze Vos]

Het is wel *enigzins* te doen, maar je moet heel wat kutten ermee. Ik heb op de van mn CS-clan (www.game-masters.nl, let niet op het design, was maar ff snel in elkaar gedraaid, als test voor de PHP-code die erachter zit) iets dergelijks voor elkaar gekregen. Alleen, de scrolling van de main div gaat via een aparte scrollbar, dus niet die aan de rechterkant, en dat is wat minder.

Voor een andere site hebben we die footer zo laag maar gewoon laten varen, het is echt veel geklooi.

[BtM909]

Rickets schreef op 30 July 2003 @ 17:43:
Dat is volgens mij niet mogelijk met CSS. Zie ook http://www.xs4all.nl/~ppk/css2tests/100percheight.html

[...]

Aan de andere kant zegt dezelfde site:

HTML:

html,body {
    height: 100%;
}

div#test {
    height: 100%;
}

Method	IE Win	IE Mac	Mozilla	Opera	Safari
'Quirks mode'	Yes	Yes	Yes	Yes	No

[Rickets]

BtM909 schreef op 30 July 2003 @ 18:05:
[...]

Aan de andere kant zegt dezelfde site:

Klopt, maar dat houdt in dat het element zo hoog als de viewport wordt.
Als je, zoals de topicstarter, met weinig tekst de hoogte op 100% en met veel tekst de hoogte op meer dan 100% wilt, dan kan dat imo niet met de huidige browsers en CSS. Dat wordt ook bedoeld op die site.

[ Voor 5% gewijzigd door Rickets op 30-07-2003 18:12 ]

[BtM909]

Rickets schreef op 30 July 2003 @ 18:11:
[...]

... met veel tekst de hoogte op meer dan 100% wilt, dan kan dat imo niet met de huidige browsers en CSS

dit heb ik niet gelezen. Dat gaat dan idd niet werken

[Verwijderd]

Bedankt voor de reacties... Ik heb ook aan het idee van Grijze Vos gedacht, volgens mij is dat dus de enige oplossing, nou ja omzeiling van het probleem Mocht iemand het toch voor elkaar krijgen, dan houd ik mij aanbevolen ...

[Verwijderd]

HTML:

<div class="fullHeight">
    weinig tekst

    <div class="footer">Lalala footer</div>
</div>

Cascading Stylesheet:

body { height:100%; }
.fullHeight {
    min-height:100%;
}
.footer {
    position:absolute;
    bottom:0;
    left:0;
}

Dit moet al aardig in de richting komen van wat je bedoelt. (niet getest)

[Clay]

Dat werkt inderdaad. Als je je content in de fullheight dan ook nog ff een margin/padding geeft aan de bottom zorg je dat de boel elkaar niet per ongeluk gaat overlappen, en omdat IE niet aan minheight doet kan je daar evt ff een scriptje tegenaangooien:

JavaScript:

function fixMinHeight(id) {
    var element = document.getElementById(id);
    if(element.currentStyle)
        element.style.height = element.currentStyle.minHeight;
}

Dacht dat currentStyle IE only was, dus dat is genoeg als check.
Beetje jammer, maar niet zo extreem dramatisch ergens. Het werkt iig.