Étiquette : hauteur

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Sources:

Dégageage du padding avec getComputedStyle

Faire un console.log(computedStyle); vous donnera une liste de toutes les données récupérées via la méthode getComputedStyle et que vous pourrez exploiter ensuite.

Dans la pratique:

Je veux récupérer la hauteur du contenu de l’élément de DOM .page-leftColumn sans le padding:

Tenir compte de la scrollbar

Voir aussi ici pour ce bout de code modifié pour tenir compte de la scrollbar:

[CSS] Ajouter des diviseurs verticaux de même hauteur

Source : Add vertical dividers with CSS | Simulation JSFiddle

Petite subtilité avec la grille Bootstrap

Les classes .col-* ont déjà la propriété position avec la valeur relative. Il faudra la surcharger avec la valeur initial.

Autre technique en utilisant une image et les backgrounds multiples de CSS3

Pour, par exemple, 3 colonnes :

[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle

Centrer un texte en hauteur avec CSS, dans un menu horizontal de navigation par exemple…

centrer_texte_en_hauteur

Simulation : http://jsfiddle.net/frontenddeveloper/Qrz58/16/

Une variante : le menu se comporte réellement comme un tableau HTML

variante

Simulation : http://jsfiddle.net/frontenddeveloper/5nkFV/2/

[jQuery] Des colonnes de même hauteur avec height

equal-height

Update : code désormais disponible sous forme de plug-in !

Plug-in jQuery

Dans le template HTML

Le paramètre setEqualHeight() sert à déterminer le nombre d’éléments par ligne (3 éléments par ligne dans le code d’exemple ci-dessous).

Remarque #1: Il reste la possibilité de définir depuis vos feuilles de styles des propriétés

et

pour gérer des hauteurs minimum et maximum pour vos blocs.

Utiliser ce plug-in dans le cadre d’un site responsive

Faire fonctionner jQuery $(window).width() et CSS3 Media Queries de concert

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Mettre en place le redimentionnement et le re-calcul des hauteurs côté jQuery

Il est indispensable de réinitialiser la hauteur du bloc ou de la colonne ciblée par le redimensionnement, sinon le plug-in ne sera pas capable d’écraser la valeur qu’il a précédemment affecté.

Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function »

Remplacer le code du plug-in comme suit :

…et utiliser la fonction comme suit :

Si les éléments ciblés ne prennent pas la même hauteur au chargement de la page…

…mais seulement une fois que la fenêtre est redimensionnée, utiliser le plug-in dans la forme donnée plus haut dans le paragraphe Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function » et déclenchez le de façon suivante :


Ancien article…

Source : http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Simulation : http://jsfiddle.net/frontenddeveloper/6GPKn/