Comment supprimer le style de hauteur d'un DIV à l'aide de jQuery?

85

Par défaut, la hauteur d'un DIV est déterminée par son contenu.

Mais, je remplace cela et définit explicitement une hauteur avec jQuery:

$('div#someDiv').height(someNumberOfPixels);

Comment puis-je inverser cela? Je veux supprimer le style de hauteur et le faire revenir à sa hauteur automatique / naturelle?

— Zack Peterson
source

1

Je ne peux pas faire fonctionner ça non plus. Il semble qu'après avoir réglé la hauteur du div sur quelque chose de spécifique (comme 300px ou autre), vous ne pouvez pas remettre la hauteur sur auto. Peut-être un bogue jQuery.

— Brandon Montgomery

102

pour supprimer la hauteur:

$('div#someDiv').css('height', '');
$('div#someDiv').css('height', null);

comme John l'a souligné, réglez la hauteur sur auto:

$('div#someDiv').css('height', 'auto');

(vérifié avec jQuery 1.4)

— user268828
source

6

Vous avez donné trois solutions, je peux confirmer que le réglage de la hauteur "" fonctionne, je ne sais pas pour les autres.

— Daniel Beardsley

1

Dans jQuery 1.9, utiliser '' mais pas utiliser null.

— Steve Tauber

1

Il y a des différences subtiles: 1 + 2 permet de réviser la nouvelle feuille de style (si quelque chose y est défini), 3 la remplace (car l'attribut défini sur auto a une priorité plus élevée)

— Frank Nocke

23

$('div#someDiv').height('auto');

J'aime l'utiliser, car il est symétrique de la façon dont vous avez explicitement utilisé .height (val) pour le définir en premier lieu, et fonctionne sur tous les navigateurs.

— non rectangulaire
source

2

Cela force la hauteur à être la hauteur automatique, remplaçant toutes les règles CSS existantes. Cela peut être correct dans certains cas spécifiques, mais en général, cela peut causer des problèmes.

— Bennett McElwee

@BennettMcElwee Je suis en fait aux prises avec le problème que vous avez décrit maintenant. Donc +1 pour ça.

— Native Coder

19

peut-être quelque chose comme

$('div#someDiv').css("height", "auto");

— John Boker
source

2

Cela remplacera toutes les règles CSS existantes qui devraient s'appliquer, ce qui peut être un problème.

— Bennett McElwee

19

vous pouvez essayer ceci:

$('div#someDiv').height('');

— schtsch
source

4

cela devrait être une réponse correcte car celui-ci supprime la valeur de style css (), il est utile de redimensionner avec js :) Bravo, merci

— Szymon

14

Pour réinitialiser la hauteur du div, essayez simplement

$("#someDiv").height('auto');

— SvenFinke
source

Il s'agit d'un double de la réponse de @ nonrectangular, qui est antérieure à cette modification.

— Bennett McElwee

3

$('div#someDiv').css('height', '');

— Rana Nematollahi
source

0

juste pour ajouter aux réponses ici, j'utilisais la hauteur comme fonction avec deux options, soit spécifier la hauteur si elle est inférieure à la hauteur de la fenêtre, soit la remettre sur auto

var windowHeight = $(window).height();
$('div#someDiv').height(function(){
    if ($(this).height() < windowHeight)
        return windowHeight;
    return 'auto';
});

J'avais besoin de centrer le contenu verticalement s'il était plus petit que la hauteur de la fenêtre ou bien de le laisser défiler naturellement, c'est ce que j'ai proposé

— John Ruddell
source

0

Merci les gars d'avoir montré tous ces exemples. J'avais toujours des problèmes avec ma page de contact sur de petits écrans multimédias comme ci-dessous 480px après avoir essayé vos exemples. Bootstrap a continué à s'insérer height: auto.

Inspecteur d'élément / Devtools affichera la hauteur en:

element.style {

}

Dans mon cas, je voyais: section#contact.contact-container | 303 x 743dans la fenêtre du navigateur.

Ainsi, les travaux complets suivants pour éliminer le problème:

$('section#contact.contact-container').height('');

— Thomas Cayne
source

-6

$('div#someDiv').removeAttr("height");

— rahul
source

Je ne pense pas que cela fonctionnera pour un style de hauteur css intégré dans un attribut de style ...

— topwik

Si quoi que ce soit, vous voudriez supprimerAttr ("style")

— jigglyT101

Cela fonctionne et c'est la meilleure option cependant si (contrairement à la question ici) vous essayez de supprimer un height="XX"attribut HTML

— user56reinstatemonica8