É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

24/11/2020 / admin

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.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight; // height with padding

elementWidth = element.clientWidth; // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);

elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Dans la pratique:

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

    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));
    // console.log(leftColumnHeight);

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));

// console.log(leftColumnHeight);

Tenir compte de la scrollbar

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

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);

var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border

elementWidth = element.offsetWidth - paddingX - borderX;

elementHeight = element.offsetHeight - paddingY - borderY;

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

18/12/2015 / admin

Source : Add vertical dividers with CSS | Simulation JSFiddle

<div id="fat-menu">
  <div class="first-column">
    ..content..
  </div>
  <div class="column">
    ..content..
  </div>
  <div class="column">
    ..content..
  </div>
  <div style="clear:both;"></div>
</div>

..content..

</div>

..content..

</div>

..content..

</div>

</div>

  #fat-menu {
    /* Set position so that offsets in children are based on parent */
    position: relative;
  }

  .first-column,
  .column {
    float:left;
    width:200px;
  }

  .column {
    margin-left:30px;
  }

  .column:before {
    content:" ";
    margin:0 -15px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666666;
  }

#fat-menu {

/* Set position so that offsets in children are based on parent */

position: relative;

}

.first-column,

.column {

float:left;

width:200px;

}

.column {

margin-left:30px;

}

.column:before {

content:" ";

margin:0 -15px;

position: absolute;

top: 0;

bottom: 0;

width: 1px;

background: #666666;

}

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.

<div class="footer-nav-columns">
  <div class="col-xs-12 col-sm-3">
  <div class="col-xs-12 col-sm-3">
  <div class="col-xs-12 col-sm-3">
  <div class="col-xs-12 col-sm-3">
</div>

</div>

  .footer-nav-columns{
    position: relative;
    padding: $grid-gutter-width 0;
    .col-xs-12{
      position: initial;
      &:not(:first-of-type):before{
        content: " ";
        margin: 0 -$grid-gutter-width / 2;
        position: absolute;
        top: 50px;
        bottom: 50px;
        width: 1px;
        background-color: $site-border-color;
      }
    }
  }

.footer-nav-columns{

position: relative;

padding: $grid-gutter-width 0;

.col-xs-12{

position: initial;

&:not(:first-of-type):before{

content: " ";

margin: 0 -$grid-gutter-width / 2;

position: absolute;

top: 50px;

bottom: 50px;

width: 1px;

background-color: $site-border-color;

}

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

Pour, par exemple, 3 colonnes :

  .mon-element{
    background:
      url(/media/themes/responsive/pixel.gif) repeat-y 33.33333% 0,
      url(/media/themes/responsive/pixel.gif) repeat-y 66.66666% 0;
  }

.mon-element{

background:

url(/media/themes/responsive/pixel.gif) repeat-y 33.33333% 0,

url(/media/themes/responsive/pixel.gif) repeat-y 66.66666% 0;

}

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

04/01/2013 / admin

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

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

.menu li{
    display: table;
    float: left;

    margin: 2px;
}

.menu a{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    
    width: 90px;
    height: 3.6em;
    line-height: 1.2em;
    padding: 5px;
    border: 1px solid #000;
    background: pink;
}

.menu a:hover{
    background: #fff;
}

.menu li{

display: table;

float: left;

margin: 2px;

}

.menu a{

display: table-cell;

vertical-align: middle;

text-align: center;

width: 90px;

height: 3.6em;

line-height: 1.2em;

padding: 5px;

border: 1px solid #000;

background: pink;

}

.menu a:hover{

background: #fff;

}

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

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

.menu{
    display: table;
    border-collapse: separate;
    border-spacing: 4px 4px;
}

.menu li{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 4em;
    padding: 4px;
    
    background: pink;
    border: 1px solid #000;
}

.menu li:hover{
    cursor: pointer;
    background: #fff;
}

.menu{

display: table;

border-collapse: separate;

border-spacing: 4px 4px;

}

.menu li{

display: table-cell;

vertical-align: middle;

text-align: center;

height: 4em;

padding: 4px;

background: pink;

border: 1px solid #000;

}

.menu li:hover{

cursor: pointer;

background: #fff;

}

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

19/11/2012 / admin

Plug-in jQuery
Utiliser ce plug-in dans le cadre d’un site responsive
Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function »
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

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

Plug-in jQuery

(function($){
    "use strict";
    $(document).ready(function(){
        $.fn.extend({
            setEqualHeight: function(chunkSize){
                var length = this.length;
                if(typeof(chunkSize) == 'undefined'){chunkSize = length;}
                for (var i=0; i<length; i+=chunkSize){
                    var columns = this.slice(i, i+chunkSize);
                    var max = 0;
                    columns.each(function(){
                        var current = $(this).height();
                        if(current > max) {max = current;}
                    });
                    columns.height(max);
                }
            }
        });
    });
})(jQuery);

(function($){

"use strict";

$(document).ready(function(){

$.fn.extend({

setEqualHeight: function(chunkSize){

var length = this.length;

if(typeof(chunkSize) == 'undefined'){chunkSize = length;}

for (var i=0; i<length; i+=chunkSize){

var columns = this.slice(i, i+chunkSize);

var max = 0;

columns.each(function(){

var current = $(this).height();

if(current > max) {max = current;}

});

columns.height(max);

}

});

})(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).

<script type="text/javascript">
    (function($){
        "use strict";
        $(document).ready(function(){
            $('#shelfList .shelf-line').setEqualHeight(3);
        });
    })(jQuery);
</script>

(function($){

"use strict";

$(document).ready(function(){

$('#shelfList .shelf-line').setEqualHeight(3);

});

})(jQuery);

</script>

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

min-height

1	min-height

max-height

1	max-height

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é.

(function($){
    "use strict";
    $('.abo-offre').css({height: 'auto'}).setEqualHeight(2);
    $(window).on('resize', function(){
        $('.abo-offre').css({height: 'auto'}).setEqualHeight(2);
    });
})(jQuery);

(function($){

"use strict";

$('.abo-offre').css({height: 'auto'}).setEqualHeight(2);

$(window).on('resize', function(){

$('.abo-offre').css({height: 'auto'}).setEqualHeight(2);

});

})(jQuery);

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

Remplacer le code du plug-in comme suit :

(function($){
  "use strict";
    $.fn.extend({
        setEqualHeight: function(chunkSize){
            var length = this.length;
            if(typeof(chunkSize) == 'undefined'){chunkSize = length;}
            for (var i=0; i<length; i+=chunkSize){
                var columns = this.slice(i, i+chunkSize);
                var max = 0;
                columns.each(function(){
                    var current = $(this).height();
                    if(current > max) {max = current;}
                });
                columns.height(max);
            }
        }
    });
})(jQuery);

(function($){

"use strict";

$.fn.extend({

setEqualHeight: function(chunkSize){

var length = this.length;

if(typeof(chunkSize) == 'undefined'){chunkSize = length;}

for (var i=0; i<length; i+=chunkSize){

var columns = this.slice(i, i+chunkSize);

var max = 0;

columns.each(function(){

var current = $(this).height();

if(current > max) {max = current;}

});

columns.height(max);

}

});

})(jQuery);

…et utiliser la fonction comme suit :

<script type="text/javascript">
	(function($){
	    "use strict";
			$(document).ready(function(){
				$('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);
				$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);			
			});
	    $(window).on('resize', function(){
	        $('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);
					$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);
	    });
	})(jQuery);
</script>

(function($){

"use strict";

$(document).ready(function(){

$('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);

$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);

});

$(window).on('resize', function(){

$('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);

$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);

});

})(jQuery);

</script>

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 :

(function($){
    "use strict";
      $(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early
        $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();
      });

      $(window).on('resize', function(){
        $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();
      });
})(jQuery);

(function($){

"use strict";

$(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early

$('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();

});

$(window).on('resize', function(){

$('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();

});

})(jQuery);

Ancien article…

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

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

// http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
function setEqualHeight(columns) {  
    var tallestcolumn = 0;  
    columns.each(function() { 
        currentHeight = jQuery(this).height();  
        if(currentHeight > tallestcolumn) { tallestcolumn  = currentHeight; }  
    });  

    columns.height(tallestcolumn);  
}  

jQuery(document).ready(function() {  
    setEqualHeight(jQuery("ol.my-list li"));
});

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

function setEqualHeight(columns) {

var tallestcolumn = 0;

columns.each(function() {

currentHeight = jQuery(this).height();

if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; }

});

columns.height(tallestcolumn);

}

jQuery(document).ready(function() {

setEqualHeight(jQuery("ol.my-list li"));

});

Articles récents

Catégories

Archives

Méta

É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

Dégageage du padding avec `getComputedStyle`

Dans la pratique:

Tenir compte de la scrollbar

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

Petite subtilité avec la grille Bootstrap

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

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

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

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

Plug-in jQuery

Dans le template HTML

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

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

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

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

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

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

Petite subtilité avec la grille Bootstrap

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

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

Plug-in jQuery

Dans le template HTML

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

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

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

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

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

Dégageage du padding avec `getComputedStyle`