Colonnes adaptables en hauteur

Soyez le premier à donner votre avis sur cette source.

Snippet vu 3 141 fois - Téléchargée 16 fois

Contenu du snippet

Ce script permet d'homogénéiser la hauteur de plusieurs colonnes en fonction du contenu.
Inutile de vous fournir une archive, la source se résume à un simple fichier "index.html" d'exemple.
Have fun !

Source / Exemple :


<!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" xml:lang="fr" lang="fr" dir="ltr">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Colonnes adaptables en hauteur.</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
	    // Ajustement de la Hauteur des Colonnes
	    $(document).ready(function() {
		var maxH = 0, cols = Array("#left_column", "#content", "#right_column");
		for(var i = 0; i < cols.length; i++) maxH = (maxH > $(cols[i]).height()) ? maxH : $(cols[i]).height();
		for(var k = 0; k < cols.length; k++) $(cols[k]).css({'height' : maxH});
	    });
        </script>
	<style type="text/css">
	    body {text-align:center;}
	    #global {width:600px;height:100%;margin:0 auto;}
	    #left_column, #content, #right_column {position:relative;float:left;}
	    #left_column, right_column {width:150px;background-color:#00306F;}
	    #content {width:300px;background-color:#0050A0;}
	</style>
    </head>
    <body>
	<div id="global">
            <div id="left_column">
                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.
            </div>
            <div id="content">
                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.
            </div>
            <div id="right_column">
                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.
		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.
            </div>
	</div>
    </body>
</html>

A voir également

Ajouter un commentaire

Commentaires

aspkiddy
Messages postés
39
Date d'inscription
jeudi 9 juin 2011
Statut
Membre
Dernière intervention
15 janvier 2014
-
Merci dronoide,
Ton code est simple avec Lib de jquery
dronoide
Messages postés
2
Date d'inscription
lundi 26 janvier 2009
Statut
Membre
Dernière intervention
31 janvier 2012
-
Merci pour ton Merci :)

En effet c'est très simple à mettre en oeuvre, et çà évite de gros maux de tête d'un point de vue CSS.
Surtout quand on veut un rendu strictement identique sur TOUS les navigateurs.
Testé et approuvé, y compris sur les browsers mobiles ;D

Un petit vote sinon ?
Au plaisir :D
creazyhead
Messages postés
3
Date d'inscription
lundi 24 mars 2008
Statut
Membre
Dernière intervention
30 janvier 2012
-
Pas mal, et surtout simple!
ça va allegé le CSS!
Un
en trop......

Merci
dronoide
Messages postés
2
Date d'inscription
lundi 26 janvier 2009
Statut
Membre
Dernière intervention
31 janvier 2012
-
C'est pas faux.
Je viens de le corriger, et merci pour le commentaire :)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (dronoide)