Taglargeur

[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:

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.

Cas particulier: la page se recharge après sélection

Source: Persist variables between page loads.

[CSS] Un background off-container

Pas totalement valide car ajoute un léger scroll horizontal

Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.

Un *tain d’exemple qui marche:

Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.

Une alternative intéressante

Notamment si l’élément doit se retrouver en sticky à un moment donné.

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Source : Input field and submit button on the same line, full width.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑