Bonjour à tous,
on a tous été confrontés un jour au problèmes de mise en page avec des colonnes flottantes que l'on voulait faire apparaître de la même hauteur.
Il existe beaucoup de solutions à ce problème dont le plus célèbre est le "faux-columns".
Ceci dit, avec un design utilisant des blocs avec des coins arrondis en css3, c'est moins évident.
J'ai trouvé une solution avec du javascript mais je sais pas si c'est la meilleure façon de procéder...
Je veux que le div#right (en gris) fasse la même hauteur que le div#left (qui contient les modules oranges)
je me sers de jQuery pour mesurer la hauteur du div#left à laquelle je soustrais le cumul padding+border (du div#right) et je l'applique ensuite au div#right.
Je souligne que la hauteur du contenu de #left sera toujours plus importante que la hauteur du contenu de #right, je veux juste ajuster les hauteurs de boite pour l'esthétique.
Je sais pas si ma solution est la meilleure, surement pas....
apparemment la propriété outerHeight n'est qu'un 'getter', on ne peut pas l’utiliser pour affecter 'setter' une valeur... c'est pour ça le jonglage avec le border et le padding.
Je joins le code respectif
Modifié par lionel_css3 (03 Aug 2013 - 09:27)
on a tous été confrontés un jour au problèmes de mise en page avec des colonnes flottantes que l'on voulait faire apparaître de la même hauteur.
Il existe beaucoup de solutions à ce problème dont le plus célèbre est le "faux-columns".
Ceci dit, avec un design utilisant des blocs avec des coins arrondis en css3, c'est moins évident.
J'ai trouvé une solution avec du javascript mais je sais pas si c'est la meilleure façon de procéder...
Je veux que le div#right (en gris) fasse la même hauteur que le div#left (qui contient les modules oranges)
je me sers de jQuery pour mesurer la hauteur du div#left à laquelle je soustrais le cumul padding+border (du div#right) et je l'applique ensuite au div#right.
Je souligne que la hauteur du contenu de #left sera toujours plus importante que la hauteur du contenu de #right, je veux juste ajuster les hauteurs de boite pour l'esthétique.
Je sais pas si ma solution est la meilleure, surement pas....
apparemment la propriété outerHeight n'est qu'un 'getter', on ne peut pas l’utiliser pour affecter 'setter' une valeur... c'est pour ça le jonglage avec le border et le padding.
Je joins le code respectif
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test faux column javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script-1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainWrap">
<div id="control" style="margin-bottom:15px;" >
<p id="control3">left height: <span></span>
<p id="control4">right height: <span></span>
</div>
<div id="left">
<div class="module">
Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque.
</div>
<div class="module">
Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque.
</div>
<div class="module">
Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque.
</div>
<div class="module lastModule">
Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque.
</div>
</div>
<div id="right">
<p>padding:10px - border:1px - 22px sur la hauteur</p>
<p>Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque. Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque. Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque.</p>
</div>
<div id="footer">
Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque. Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque. Cras sit amet semper turpis, eu scelerisque nunc. Phasellus in suscipit nisl. Cras a ligula dui. Sed eleifend arcu eget augue accumsan feugiat sit amet eget urna. Nam auctor turpis et pulvinar vestibulum. Curabitur interdum nec justo quis malesuada. Suspendisse euismod enim vestibulum massa pulvinar pellentesque
</div>
</div>
</body>
</html>
/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
margin: 0;
padding: 0;
border: 0;
vertical-align:baseline;
font: inherit;
}
html {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
div {
}
#mainWrap {
width:90%;
min-width:960px;
max-width:1200px;
margin:10px auto;
}
#left {
width:30%;
float:left;
}
.module {
border-radius:10px;
background-color:#FC9;
margin-bottom:10px;
padding:10px;
}
.module.lastModule {
margin-bottom:0;
}
#right {
width:60%;
border:1px solid black;
border-radius:6px;
background-color:#CCC;
float:right;
padding:10px;
}
#footer {
float:left;
clear:both;
margin-top:20px;
padding:10px;
border-radius:10px;
background-color:#69F;
}
$(document).ready(function() {
var newHeight = $("#left").height() - 20 -2; /* 20=padding total, 2=border total */
$("#right").css('height', newHeight);
$("p#control3 span").text($("#left").height());
$("p#control4 span").text(newHeight);
});
Modifié par lionel_css3 (03 Aug 2013 - 09:27)
