Placer un bloc à 150px du haut, allant jusqu'en bas et extensible.

Bonjour à tous,

Je suis en train de me faire un petit site internet et j'ai quelques problèmes avec la mise en page.
Pour faire simple, j'ai une page avec un header, un bloc de contenu et le footer.

J'aimerais que mon bloc de contenu aille de 150px du haut de la page (soit la hauteur de mon header) jusqu'en bas de ma page. Mon footer sera toujours en bas de la page.

L'idée étant que quelque soit le contenu, le footer soit en bas.

J'ai fais plusieurs essais :

#content{
position:absolute;
top:150px;
bottom:0;
}

mais dans ce cas, si j'ai trop de texte, le bloc "content" n'est pas redimensionné par rapport au contenu : ça déborde !

Deuxième essai :

html, body{
height:100%
}
#header{
position:relative;
height:150px
}
#content{
position:relative;
height:auto;
min-height:100%
}
#footer{
position:relative;
height:100px;
margin-top:-100px
}

Ca fonctionnerait presque, le seul problème est que j'arrive à 100% + les 150px de mon header donc j'ai toujours une scrolling bar...

De plus, je ne peux pas mettre mon header dans mon bloc content comme ceci :

<div id="content"><div id="header">Mon titre</div>Mon contenu</div>

Car mon bloc header est transparent (on voit le background de mon body à travers) alors que mon bloc content à son propre background.

Du coup, je me retrouve un peu bloqué. Si vous aviez une idée ou un lien ça serait super cool.
J'ai essayé de trouver sur le net sur des forums ou même en regardant le code de certains sites, sans jamais trouver le même cas.

Merci d'avance !

Je me permet d'ajouter une image pour montrer le résultat que je recherche si ça peut aider :

http://img850.imageshack.us/img850/8174/sdzk.png

Merci d'avance.

Bonjour,

Tu utilises le positionnement relatif de manière abusive...

Jette un coup par là :guide-de-survie-du-positionnement-css