Hauteur intelligente des divs

Bonjour,

Je viens demander votre aide sur un problème de hauteur de divs.

Ma page web a une présentation classique :

Largeur fixe, centrée. Une entête de la largeur de la page, horizontale.
Un menu vertical à gauche, un espace pour le contenu à droite.

Elle est composée des 4 divs suivantes :

1. Une div qui contient tous les éléments de la page :

 mainframe  {position : relative; width: 900px;} 

2. Une div pour l'entete

.header  {position : relative; width:	100%;}

3. Une div à gauche pour le menu

.menu  {float: left; width: 300px; height : 100%;}

4. une div à droite pour le contenu de la page.

.content  {float: right; width: 600px; height :100%;}

Voici l'organisation des divs :

<div class="mainframe">
<div class="header">

.... blablabla ...

</div>
<div class="menu">

.... blablabla ...

</div>
<div class="content">

.... blablabla ...

</div>
</div>

Mon problème :

Bien que cela n'apparaisse pas dans le code présenté, le fond de mes divs est coloré. Du coup, j'aimerais bien que les divs "menu" et "content" aient la même hauteur : c'est à dire qu'elles s'étendent toutes les deux jusqu'en bas de la div mainframe.
Pour avoir une même taille pour le bloc coloré du menu et le bloc coloré du contenu.

Avec le code actuel, c'est possible, si je donne une hauteur en en pixels à mainframe.

Cette solution ne me convient pas, parce que chaque page aura une hauteur différente, correspondant à la taille de la plus grande div (menu ou content)

J'ai essayé d'autres variations, comme donner une hauteur 100% à mainframe. Mais ca ne marche pas.

Quelqu'un peut-il maider svp ?
Merci par avance

Bonjour,

Le plus simple à mon avis, c'est d'utiliser des colonnes factices : http://www.pompage.net/pompe/colonnesfactices/

J'espère que ça t'aidera.

Merci pour ta réponse.
J'ai juste affiché l'article, et il semble corresponde exactement à ma recherche.

Je vais le lire de suite. Je posterai à nouveau pour dire où j'en suis.

Merci encore.

En fait, je n'ai pas bien compris...

Il faut répeter une image... Ok... mais pourquoi répeter une image ? Et pourquoi, si on repete une image, les deux divs vont se re-dimensionner à la même hauteur ?

En faite, je n'ai pas compris ce qu'apporte la répetition de l'image, ni où je dois la repeter. (dans mainframe ? Est-ce que je dois ajouter des divs supplémentaires ?)

Wrap a écrit :
Il faut répeter une image... Ok... mais pourquoi répeter une image ? Et pourquoi, si on repete une image, les deux divs vont se re-dimensionner à la même hauteur ?

La hauteur ne changera pas mais ça donnera l'impression que les divs sont de la même hauteur.

Et oui, dans la répétition peut se faire dans mainframe, tu peux ensuite donner les bons fonds à ton header et à ton footer.

Ok, j'ai compris maintenant :

On utilise deux divs qui contiennent les deux colonnes. Ces deux divs ont donc la largeur de la somme des largeurs des colonnes et la hauteur de la plus grande des colonnes.

Dans la première div, je répète, à gauche et verticalement, la couleur du fond de la colonne gauche, sous forme d'image.
Dans la seconde, même chose, mais à droite, avec la couleur de la colonne de droite.


C'est un peu lourd comme système... du coup, si je veux changer la couleur de mes colonnes, ou leur largeur, il faut que je modifie aussi les images...

N'y a-t-il pas une solution plus simple ?

Edit : de plus, dans certains navigateurs, on voit une différence entre la couleur du fond de la colonne et la couleur de l'image...
Comment se passer des images ?
Modifié par Wrap (20 Jul 2008 - 16:44)

Non, soit j'ai mal compris ton explication, soit c'est toi qui n'as pas bien compris

En gros tu as un div qui englobe des deux colonnes (qui ici sont div menu et div content) ce div actuelle c'est ton mainframe. A ce div ci tu donne un fond qui représente les deux colonnes (donc un fond bicolore aux proportion désirées).

Pour les problème de couleurs, ça peut s'arranger en utilisant des couleurs "garantie pour le web" (photoshop propose une option de ce genre dans la palette de couleurs).

Et non je ne pense pas qu'il y ait d'autre solution pour être sûr à 100% d'avoir deux colonne de taille (semblant) identique.

Yasashii a écrit :
Et non je ne pense pas qu'il y ait d'autre solution pour être sûr à 100% d'avoir deux colonne de taille (semblant) identique.

Bah on peut toujours mettre un tableau mais bon ce serait dommage vu que l'image de fond c'est plutôt simple comme technique ...

Bonjour,

Je te conseille de lire le tuto de Benjamin De Cock qui est très bien fait et suit la logique "que faire dans quelle situation".

Tu peux le trouver ici et recherche la phrase

a écrit :
Deux cas de figures se présentent:

Juste au cas-où:
----------------
En ce qui concerne les "faux colonnes" (si j'ai bien compris le principe) tu définis une image de background pour chacun de tes 2 div, et ces derniers auront alors une hauteur fixe.

Malheureusement cela ne semble pas correspondre à ce que tu cherches, car si le texte dans un de tes div est trop grand, il dépassera du div; il faudra alors utiliser overflow: hidden. Mais dans tous les cas tu ne pourras pas avoir de hauteur variable avec les "faux-colonnes".

J'espère que ça va t'aider...

"faux colonnes" ?

Si tu parles des colonnes factices (au féminin). il s'agit d'un div englobant les deux colonnes auquel on attribue un et un seul fond qui constituera celui des deux colonnes. Et dans ce cas il n'y a pas de hauteur fixe, les colonnes prendront la place dont elles auront besoin.

Bonjour a tous.

J'ai l'impression que vous cherche a expliquer simplement quelque chose mais que le resultat de l'explication n'est pas tres claire...

En gros ce que vous lui propose, c'est

<div id="global">
     <div id="menu">
     </div>
     <div id="contenu">
     </div>
</div>

En metant un background-image dans la div global. La largeur de l'image etant egale a la largeur menu + contenu. En precisant que cette image est compose de deux couleur. (Par exemple) 150px de rouge pour le menu et 450px de vert pour le contenu ce qui fait une image de 600px de large.
Pour ce qui est de la heuteur 1px sufi si dans la feuille de style css tu precise background-repeat: repeat-x; Ainsi ton image se repetera autan de fois que necessaire pour remplir ta div global. Sachant que ta div global prendra une hauteur automatique en fonction de la plus grande hauteur des div qui la compose. Cela donnera l'impression visuel davoir deux colonnes de meme hauteur puisque l'image de fond (qui possede deux couleurs) aura la meme hauteur que la div la plus haute.

Je sais pas si c'est plus claire??? (Dite moi si j'ai dit une betise... )

[EDIT] Desole pour les fautes de langue (c'est pas mon point fort ) deplus je suis sur un clavier anglais, donc ca n'arrange rien...
Modifié par Dim (22 Jul 2008 - 13:00)

Dim a écrit :
(Dite moi si j'ai dit une betise... )

C'est tout à fait ça par contre y a des fautes de langue dans ton message ...

Bonjour,

Yasashii a écrit :
Pour les problème de couleurs, ça peut s'arranger en utilisant des couleurs "garantie pour le web" (photoshop propose une option de ce genre dans la palette de couleurs).

Rien à voir. Les couleurs «garanties pour le web» ne servent pas à grand chose depuis bien longtemps. Elles retrouvent peut-être une utilité avec certains périphériques mobiles qui ont une capacité d'affichage des couleurs faible, mais je n'en suis même pas sûr (et si c'est le cas eh bien c'est transitoire et ça ne durera pas).

Si les valeurs hexadécimales des couleurs sont les mêmes et qu'elles apparaissent différemment dans certains navigateurs (notamment Safari sur Mac), c'est un problème de gestion de profils de couleur. En particulier avec le PNG, il faut des fichiers PNG:
1. sans correction gamma;
2. sans profil colorimétrique.
(Ça peut se corriger avec PNGCrush par exemple.)

Le deuxième point est peut-être valable également pour le JPEG.

À lire (en anglais): The Sad Story of PNG Gamma “Correction”.

Et pour revenir aux colonnes de même hauteur, il y a un moyen simple: utiliser display: table-cell pour obtenir un affichage de type «cellule de tableau». Seul problème: Internet Explorer n'y comprend rien (sauf à priori dans sa version 8 encore en préparation). Donc «vraies» cellules de tableau (éléments TABLE, TR et TD) ou technique «trompe-l'oeil» des colonnes factices.
Modifié par Florent V. (22 Jul 2008 - 11:30)

Bonjour,

Il y a aussi la solution javascript, qui calcule à la volée la hauteur d'un div pour l'adapter à l'autre div.
Simple et efficace.

function fixColumns(){
	var c1 = document.getElementById("menu");
	var c2 = document.getElementById("contenu");
	if(c1.offsetHeight && c2.offsetHeight){
		maxheight=Math.max(c1.offsetHeight,c2.offsetHeight)+'px';
	}
	c1.style.height = maxheight;
	c2.style.height = maxheight;
}