Discussion :

[Lost In Translation]

Bonjour,

J'ai actuellement un léger soucis.
J'ai deux divs contenus dans un troisième.

La hauteur de ces div change en fonction de leur contenu.
Deux divs sont côte à côte grâce au positionnement par l'attribut "float".

Le soucis, c'est que ma barre de navigation verticale "gauche" ne fait la taille que de son contenu et j'aimerais qu'elle ait la taille soit de la colonne à son côté, soit du div conteneur (le parent).

Est-il possible de le spécifier par le CSS ou dois-je utiliser du javascript pour ceci ?

Voici la partie du code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
      <div id="main">
 
        <div id="sidenav">
          {$page_sidenav}
        </div>
 
        <div id="content">
          {$page_contenu}
        </div>
 
        <div class="clearer"></div>
 
      </div>

Et voici le CSS.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
/* centre */
#main
{
  border-top: 4px solid #FFF;
  background: url(images/bgmain.gif) repeat-y;
  width:760px;
}
 
/* menu gauche */
#sidenav
{
  float: left;
  width: 210px;
  min-height:200px;
  background:red;
  margin-top:10px;
}
 
/* contenu */
#content
{
  float: right;
  width: 530px;
}
 
.clearer
{
  clear: both;
}

Je ne spécifie aucun width, vu que la taille du contenu est complètement variable.
Le tout serait que height#sidenav = height#content

J'aimerais savoir si une solution CSS existe, sinon j'utiliserais du javascript.

J'ai tenté un height:inherit; mais ça n'a rien changé. Je suppose que pour cela il aurait fallut spécifier une hauteur fixe dans mon #main.

Merci

[baroutch]

A moins d'avoir un conteneur qui englobe les deux div qui elle meme héritent de sa hauteur je vois pas comment tu peux faire en CSS.

[Lost In Translation]

Je l'ai réalisé en javascript assez facilement avec mootools...

Mais je me disais que peut être qu'avec les héritages c'était jouable. Le problème étant que comme les hauteurs sont variables et donc non reseignées... ça doit peut être pas être faisable...

Du coup, j'ai fais ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var sizeContent = $('content').getSize();
        var sizeSidenav = $('sidenav').getSize();
        var sizeMotif = sizeContent.y - sizeSidenav.y;
        $('motif').setStyle('height', sizeMotif);

1, je récupère la taille de la colonne d'à côté à hauteur variable
2, je récupère la hauteur de ma sidenav une hauteur de 200px environ (à 10% prêt, variable aussi)
3, Je calcul l'écart et je l'affecte à ma colonne complètement vide pour la remplir d'un motif...

Ca marche très bien comme ça. Si la solution tombe en CSS, j'suis intéressé. ^^

[12monkeys]

Bonsoir

Pour le faire en CSS fais une petite rechercher avec les termes 'colonnes factices'...