Bonjour tout le monde.
Je viens de passer l'apres midi sur une structure et je bloque sur ce 100% de hauteur, tout deconne et dans ie6 je vous raconte pas
Si quelqu'un de bien attentionné pouvait me fournir un petit squelette basique ce serait sympa

Voilà la maquette

on le voit pas sur l'image désolé, mais il y'a un fil d'ariane en bas de page et un footer, ce que j'ai fait comme code bizarrement rien ne s'affiche en dessous la div page

Je peut mettre mon code si vous voulez mais je pense pas qu'il ai beaucoup d'interêt

personne svp ? juste pour me mettre en place ces 4 blocs

Par exemple tu peux créer 2 "conteneurs" :
 
Un premier que tu appelles "conteneur1" (par ex) correspondra à ta zone/bloc grise. Il sera "à l'intérieur"
du bloc du fond (jaune).
 
A l'intérieur de ce conteneur tu en crées un second, "conteneur2", dans lequel tu mettras :
le bloc bleu - tu forces ce bloc bleu à ce que les suivants se placent en dessous
le bloc jaune pale
le bloc vert pale - que tu forces à placer vers la droite ( "float:right" )
 
Ce "container2", tu lui assignes un "float:right" pour qu'il se colle à la droite, à l'intérieur du conteneur1 (le gris)
 
 
Normalement ca devrait marcher (il existe plein d'autres solutions...)

Qu'est-ce que tu veux dire par "100 % de hauteur" ?

ça me rassure parceque c'est ce que j'ai fait, je met le code

HTML

CSS

EDIT : par 100% de hauteur j'entend que quelquesoit la taille du contenu le contenant prenne l'intégralité de la hauteur de la fenêtre

Voilà donc je comprend pas pourquoi le ariane répété en bas n'apparait pas

J'ai lu vite fait, mais déjà :  
 
- tu as un #page {} qui est vide, tu devrais le virer
- quand tu mets en position absolute, je te conseille d'indiquer aussi un "top:0;"
- quand tu utilises des margin:auto pour centrer, il faut rajouter un position:relative;
 
PS : c'est quoi ton métier ?

a la base suis infographiste print, et je me retrouve a faire du web, je fais tout ce que tu dis pour voir et j'heberge pour montrer

http://www.mushu.fr/test
Voilà, y'a du mieux mais je comprend pas pourquoi le bloc de droite s'agrandit a 100% + le header
Par contre je vous raconte même pas la tronche du truc sous ie ...

c'est normal si ton conteneur + ton conteneur_droite, on arrive à une largeur de 1800pixels ?

ah non pardon j'ai mal lu

Dans un premeir temps, vire ça de ton HTML  
 
<div id="header"> header </div>
      <div id="ariane">ariane</div>
      <div id="page"> page</div>
      <div id="pub_droite"> pub droite </div>
      <div id="ariane">ariane</div>
 
Pour te concentrer que sur ce qui pose problème
Dans le développement il faut agir par méthode d'élimination
 
Ensuite, pourquoi tu as mis ça "clip: rect(auto,auto,auto,auto);" ?

bah si je vire ça j'ai plus de problème, puisque c'est l'ecart du bas qui deconne
 
pour clip bidule.... je sais pas d'ou c'est sorti, je l'ai viré

Ensuite, pourquoi tu as mis ça "clip: rect(auto,auto,auto,auto);" ?

répondu au dessus ^_^ Dreamweaver surement ...

Bon déjà pour une question de propreté, on met le body en premier, et ensuite on essaye d'avoir une hierarchisation à chaque élément, genre en premier le position, ensuite les tailles, les marges, etc. Ensuite ton body t'as pas à le definir comme ça, ton body c'est un élément un peu virtuel il sert surtout à définir des propriétés générales. Ensuite tu uilises les positions n'importe comment... t'as pas à mettre des positions absolute partout...
 
Voici un code CSS plus propre :
 

Si c'est ta question, en CSS de base on ne *peut pas* ajuster la hauteur d'un enfant en fonction de celle de son parent si ce dernier n'a pas une taille fixe. Autrement dit, la plupart du temps height: 100% ne marche pas.

La seule solution de faire une mise en page qui colle à la fenêtre en hauteur (ce qui est rarement un bon choix de design ceci dit) c'est de caler tout en absolute avec des bottom: 0 et des right: 0...

Dans ton cas j'en sais rien, l'essentiel (le footer et la hauteur ajustée) n'étant pas dans le screenshot que tu nous a filé...

ensuite si tu utilises plusieurs fois un élément (ariane) c'est une class et pas un ID, un ID c'est pour un élément unique.  
 
donc il faut faire div class="ariane"
 
et dans ton css c'est plus #ariane{ mais .ariane{

ok donc si j'ai bien compris ma structure était pas si con que ça^^
ok merci pour toutes ces précisions, je fait un truc propre je emt en ligne et je vous montre

C'est bof en absolute, il faut mieux privilégier que ta partie que tu veux en 100% contiennent les autres éléments, comme ça elle s'agrandit avec eux, c'est plus malin et plus propre. Enfin bon tu fais comme tu veux mais moi je vais pas y passer la nuit hein

voilà, bon rien fonctionne mais bon ... sous ie6 la partie de gauche n'apparait pas, dans l'idéal je voudrais que la div page comble tout ce vide
http://www.mushu.fr/test

Tu prends pas la feuille que je t'ai filée, donc bon je vais avoir du mal à t'aider

j'ai trouvé ça
ca pourrait être applicalbe a mon cas ?
http://www.lamaprod.com/CSS-Hauteu [...] n-bas.html

EDIT: si j'ai fait comme t'as dit, d'ailleurs ca a été assez chiant virer tout les chiffres devant chaque ligne ^_^ apres j'ai essayé de forcer la partie de gauche a s'agrandir, c'est obligé vu la page a faire et le design a y mettre

Déja, vire tous les height: 100%.
 
Pour ta div "page", fout-lui genre un min-height: 700px, pareil pour la colonne de gauche.

Ca devrait, jamais essayé ce genre de truc perso.

 
Il suffit de cliquer sur la case où il y a le code et les chiffres s'en vont...
Ensuite non tu as pas repris mon code vu qu'il y a des trucs importants qui ont été virés dedans.

 
min-height ? Le genre de truc batard qui fonctionne pas sous IE

 
 
C'est quoi que tu reproches à ton affichage (sous Firefox) au juste ?...
 
Edit : ou sous IE7 d'ailleurs...

C'est totalement standard et ça marche sur IE 7+ . Au-dessous, il suffit d'un _height:700px;

 
Non mais son truc peut être fait sans aucun hack css donc bon, autant le faire simplement

T'es sûr de toi là  

Complètement.
Tout peut être fait sans hack css de manière générale, c'est juste que c'est moins contraignant et plus rapide d'en foutre partout

Bah déja dans ton CSS, #conteneur { height: 100% } ne marchera pas sous IE6. Et si son contenu dépasse, il est fucké.

Sans hack, tu veux dire "avec des commentaires conditionnels spécial IE" je suppose ?
 
Parce que sinon, tu m'expliqueras comment on fait un min-height sans hack, par ex.

 
Pour linstant j'ai pas essayé de résoudre son problème, ma feuille CSS n'a pour but que de lui inculquer des bonnes méthodes et de la rigueur dans sa feuille. S'il doit faire tout un site, il faut mieux qu'il puisse s'y retrouver, sinon il va revenir nous voir toites les 5 mins
 
"Parce que sinon, tu m'expliqueras comment on fait un min-height sans hack, par ex."
 
Bah on ne l'utilise pas

Vu comme ça On peut tout faire sans hack, sauf ce qui a besoin d'un hack, quoi

J'ai jamais vu un projet où on avait besoin de min-height

Moi si, plein.

T'as un exemple de cas ?

- Une div avec un contenu de taille variable
- Mais on veut qu'elle fasse minimum 10 lignes de haut sinon c'est moche.