Discussion :

[link.80]

Bonjour,

Je cherche a faire un template sur 3 colonnes avec une hauteur de 100% pour chacune d'elles avec possibilité de rajouter du contenu à l'infini (et que les autres blocs suivent sur la hauteur).

J'ai réussi à faire ce que je voulais, étonnement ça fonctionne sur IE, Firefox et Opera mais sur safari si une box dépasse en contenu les 100% de la page, les autres boxes ne suivent plus... (exemple sur la colonne 3 qui a un contenu plus long)

Et sur Chrome, je n'ai pas de scroll...

http://jsfiddle.net/tuUGD/

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
15
16
17
18
19
20
21
22
23
24
25
26
 
<div class="container">
   <div class="row-fluid">
 
	<section id="col1" class="col">col1</section>  
        <section id="col2" class="col">col2</section>
        <section id="col3" class="col">col3
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            blabla
            </section>
	</div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
html, body {height:100%;}
.container {min-height: 100%;overflow: hidden;}
.col {
	margin-bottom: -99999999999999999px;
	padding-bottom: 99999999999999999px;
	float:left;
}
 
#col2    {background:#C03;width:10%;}
#col3 {background:#F0F;width:60%;}
#col1 { background:#636;width:30%;}

Ca serait vraiment sympa d'avoir votre aide ou une soluce pour réaliser ce que j'aimerais faire, pas sur d'avoir pris la bonne direction.

D'avance un grand merci et une excellente journée à vous.

[Candygirl]

Hello,

Si tu as vraiment besoin de ce type de structure (dur de se prononcer avec si peu de détail) tu devrais regarder du côté de display:table et table-cell (IE8+).

[link.80]

(dur de se prononcer avec si peu de détail)

Hello Candygirl, merci pour la réponse,

J'ai mis l'exemple dans le lien fiddle de mon premier post.
http://jsfiddle.net/tuUGD/

J'aimerais 3 container d'une hauteur de 100%, mais en cas de contenu plus long dans un des container, avoir un scroll et que les autres containers soient de la même hauteur que le plus long...

[Invité]

Candygirl t'a donné la/une réponse.
Encore faudrait-il que tu la testes...

[unapologetic]

Bonjour,

Voici une seconde solution, moins élégante que celle de Candygirl.
Propriétés CSS de tes div/section/p... :

Code :

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

1
2
3
4
5
 
width     : 33%   ; (ou autre)
height    : 100%  ;
float     : left  ;
overflow  : auto  ;