2009-04-29 7 views
77

Par défaut, la hauteur d'une DIV est déterminée par son contenu.Comment supprimer le style de hauteur d'un DIV en utilisant jQuery?

Mais, je passer outre cela et définir explicitement une hauteur avec jQuery:

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

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

+1

Je n'arrive pas à faire fonctionner ça non plus. Il semble que, après avoir réglé la hauteur de la div à quelque chose de spécifique (comme 300px ou autre), vous ne pouvez pas rétablir la hauteur en auto. Peut-être un bug jQuery. –

Répondre

17

peut-être quelque chose comme

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

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

-6
$('div#someDiv').removeAttr("height"); 
+0

Je ne pense pas que cela fonctionnera pour un style de hauteur CSS qui est incorporé dans un attribut de style ... – topwik

+1

Oui, cela ** ne fonctionne pas. –

+0

Si quelque chose, vous voulez supprimerAttr ("style") – mindwire22

13

Pour réinitialiser la hauteur de la div, juste essayer

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

+0

, cela fonctionne. Voir la réponse ci-dessus. – nonrectangular

+0

Ceci est une copie de la réponse de @ nonrectangular, qui précède cette modification. –

89

pour enlever la hauteur:

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

comme Jo hn a souligné, la hauteur réglée sur auto:

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

(vérifié avec jQuery 1,4)

+0

Je peux confirmer que cela fonctionne (jQuery 1.4.2 au moins). –

+5

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

+1

Dans jQuery 1.9 en utilisant '' mais en utilisant 'null' ne fonctionne pas. –

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

J'aime utiliser ce, parce qu'il est symétrique avec la façon dont vous .height utilisé explicitement (val) pour le régler en premier lieu, et fonctionne à travers les navigateurs.

+1

Cela force la hauteur à être la hauteur automatique, remplaçant toute CSS existante règles. Cela peut être OK dans certains cas spécifiques, mais en général cela pourrait causer des problèmes. –

+0

@BennettMcElwee Je suis en train de lutter avec le problème que vous avez décrit maintenant. Donc +1 pour ça. –

14

vous pouvez essayer ceci:

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

cela devrait être correct anwser comme celui-ci supprime la valeur de style de css(), il est utile sur le redimensionnement avec js :) Cheers, merci –

0

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

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

je devais centrer le contenu verticalement si elle était inférieure à la hauteur de la fenêtre ou bien laisser défiler c'est naturellement si ce que je suis venu avec

0

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

Élément inspecteur/Devtools indique la hauteur:

element.style { 

} 

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

donc ce qui suit toute la longueur travaille à éliminer le problème.

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

2

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

Questions connexes