Discussion :

[narmataru]

Bonjour,

J'ai une page web qui se divise en 2 colonne et utilise quelques classe bootstrap:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
	<div class="span6">
		<div class="well">
			<p>aaaa</p>
		</div>
	</div>
	<div class="span6">
		<div class="well">
			<p>bbb</p>
			<p>ccc</p>
		</div>
	</div>
</div>

La class 'span6' à l'intérieur d'une classe 'row' me permet d'avoir 2 colonnes dans de jolis cadres 'well'. Cependant, le 2nd cadre possède plus de contenu et est donc plus haut que le 1er.

Comment faire en sorte que 2 deux cadres aient la même hauteur sans donner une valeur fixe ?

merci

[FirePrawn]

Hello,

Si j'ai bien compris ce que tu demandes n'est pas possible.
Si tu ne précises pas de hauteur elle va s'adapter au contenu automatiquement. Donc si tu as plus de contenu d'un côté, la hauteur sera forcément plus importante.

[Torgar]

Si t'es pas à cheval sur la compatibilité (I8+), tu peux faire un display: table sur la div avec la class "row" et des display: table-cell sur les class "span6".

[narmataru]

Merci Torgar je vais essayer ta solution.

Je pensais que définir une hauteur de '100%' (mais je ne sais pas ou ni comment) permettrait à la div la plus petite de remplir l'espace de la div row qui elle dépend de la div la plus haute. C'est pour ça que je pensais que c'était possible simplement.

[narmataru]

Si t'es pas à cheval sur la compatibilité (I8+), tu peux faire un display: table sur la div avec la class "row" et des display: table-cell sur les class "span6".

Celà ne change rien . J'ai testé sous chrome.

[Torgar]

Ceci fonctionne sous Chrome et Firefox :

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
<div class="row" style="display: table; border: 1px solid black;">
	<div class="span6" style="display: table-cell; border: 1px solid black;">
		<div class="well">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="span6" style="display: table-cell; border: 1px solid black;">
		<div class="well">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>

[narmataru]

oui, merci, je me rend compte que ça fonctionne, mais c la class 'well' de bootstrap qui ne rempli pas la cellule alors...

[narmataru]

Si j'affecte des dimensions height et width à la balise div.well avec l'unité px, le cadre du well est bien redimensionné. Si je mets en % ça ne fait rien. Donc, je ne peut pas mettre '100%' en hauteur et largeur.

[FirePrawn]

La valeur 100% signifie que ton élément prend 100% de son conteneur pas de son contenu

[narmataru]

Je suis passé par une fonction javascript (avec jquery) du coup. Ca fonctionne nickel

Code javascript :

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
function setNewsHeight(){
var i = 0;
var prevDiv = null;
$( '#newsDivId div.well' ).each(function(){
	if(i % 2 == 1){
		var h1 = prevDiv.height();
		var h2 = $(this).height();
		if(h1 > h2){
			$(this).height(h1);
		}
		else{
			prevDiv.height(h2);
		}
	}
	prevDiv = $(this);
	i++;
});
}

[narmataru]

Je ne comprend pas, ma fonction marche bien sous IE et FF, mais pas sous chrome. La hauteur retournée des div est plus petite et lorsque je force l'attribut height sur la plus petite des deux div adjacente, elle ne se met pas à la taille de l'autre.

Bref, div.height() ne me retourne pas la vrai hauteur de la div...

[narmataru]

J'ai changé le moment d'appel de ma méthode :

Code javascript :

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

1
2
3
$(document).ready(function() {
	setNewsHeight();
});

est devenu :

Code javascript :

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

1
2
3
$(window).load(function() {
	setNewsHeight();
});

Maintenant j'ai les bonnes hauteurs.