Après moultes modifications de mon site, il s'est avéré que ma première solution de hauteur minimale pour une div a moins bien fonctionné que prévu, tout du moins sous Firefox. Comme je commençait à avoir un CSS complexe, et que j'avais déjà du jQuery à foison dans tout le site, et donc que ce dernier était indispensable au fonctionnement normal du site, je me suis donc penché sur la solution en script plutôt qu'en CSS.
Première bonne nouvelle, pas besoin de plugin pour ça, j'ai trouvé tout ce qu'il me fallait dans l'api de base:
- jquery.height()
Pour commencer, posons notre squelette:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Redimensionnons nos div</title>
<!-- Inclusion de jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- votre css -->
<link type='text/css' href='css/mon.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id="div_principale">
<div id="div_gauche">
<!-- Le contenu de votre div gauche-->
</div>
<div id="div_droite">
<!-- Le contenu de votre div droite-->
</div>
</div>
</body>
</html> Nous sommes ici face à la problématique suivante: nous devons donner une hauteur fixe à notre div principale, mais nous voulons que notre div de gauche ou notre div de droite à contenu variable ne dépassent pas de la div principale.
Pour ce faire, entre nos deux balises head, nous allons placer ce petit script:
<script type="text/javascript">
$(document).ready(
function()
{
if($('#div_gauche').height()>$('#div_droite').height())
{
$("#div_principale").height($('#div_gauche').height()+30);
}else
{
$("#div_principale").height($('#div_droite').height()+30);
}
}
);
</script>Et voilà!
$(document).ready va permettre de charger le script après les chargement de la page.
Ensuite le script va déterminer sir la div de gauche est plus grande que la div de droite, si oui la div principale prendra la hauteur de la div de gauche + 30 pixels, si non elle prendra la hauteur de la div de droite + 30 pixels, c'est aussi simple que ça.
Bien sûr ceci n'est qu'un petit exemple, après l'idéal est faire appel à cette fonction dans des callbacks par exemple :)
Aucun commentaire:
Enregistrer un commentaire