Como faço para remover o estilo de altura de um DIV usando jQuery?

86

Por padrão, a altura de um DIV é determinada por seu conteúdo.

Mas, eu substituo isso e defino explicitamente uma altura com jQuery:

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

Como posso reverter isso? Quero remover o estilo de altura e fazer com que volte para a altura automática / natural?

Zack Peterson
fonte
1
Eu também não consigo fazer isso funcionar. Parece que depois de definir a altura do div para algo específico (como 300px ou qualquer outra coisa), você não pode definir a altura de volta para automático. Pode ser um bug do jQuery.
Brandon Montgomery

Respostas:

103

para remover a altura:

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

como John apontou, defina a altura para auto:

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

(verificado com jQuery 1.4)

user268828
fonte
6
Você deu três soluções, posso confirmar a configuração de altura para "" funciona, não sei sobre as outras.
Daniel Beardsley,
1
No jQuery 1.9, usando '', mas nullnão usando .
Steve Tauber
1
Existem diferenças sutis: 1 + 2 permite revisar o w stlyesheet (se houver algo definido lá), 3 substitui-o (já que o atributo definido como auto tem maior precedência)
Frank Nocke
23
$('div#someDiv').height('auto');

Gosto de usar isso, porque é simétrico com a forma como você usou explicitamente .height (val) para defini-lo em primeiro lugar e funciona em vários navegadores.

não retangular
fonte
2
Isso força a altura a ser a altura automática, substituindo todas as regras CSS existentes. Isso pode funcionar em alguns casos específicos, mas em geral pode causar problemas.
Bennett McElwee
@BennettMcElwee Na verdade, estou lutando contra o problema que você descreveu agora. Então, +1 para isso.
Native Coder
20

você pode tentar isto:

$('div#someDiv').height('');
Schtsch
fonte
4
isso deve estar correto anwser, pois este remove o valor do estilo css (), é útil no redimensionamento com js :) Saudações, obrigado
Szymon
19

talvez algo como

$('div#someDiv').css("height", "auto");
John Boker
fonte
2
Isso substituirá quaisquer regras CSS existentes que devam ser aplicadas, o que pode ser um problema.
Bennett McElwee
14

Para redefinir a altura do div, tente

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

SvenFinke
fonte
Esta é uma duplicata da resposta de @não retangular, que é anterior a esta edição.
Bennett McElwee
4
$('div#someDiv').css('height', '');
Rana Nematollahi
fonte
0

apenas para adicionar as respostas aqui, eu estava usando a altura como uma função com duas opções: especificar a altura se for menor que a altura da janela ou definir novamente para automático

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

Eu precisava centralizar o conteúdo verticalmente se fosse menor que a altura da janela ou então deixá-lo rolar naturalmente, então foi isso que eu fiz

John Ruddell
fonte
0

Obrigado pessoal por mostrar todos esses exemplos. Eu ainda estava tendo problemas com minha página de contato em pequenas telas de mídia como abaixo de 480px depois de tentar seus exemplos. Bootstrap continuou inserindo height: auto.

O inspetor de elementos / Devtools mostrará a altura em:

element.style {

}

No meu caso eu estava vendo: section#contact.contact-container | 303 x 743na janela do navegador.

Portanto, o seguinte trabalho completo para eliminar o problema:

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

Thomas Cayne
fonte
-6
$('div#someDiv').removeAttr("height");
Rahul
fonte
Eu não acho que isso funcionará para um estilo de altura css que está embutido em um atributo de estilo ...
topwik
Se houver alguma coisa, convém removerAttr ("estilo")
jigglyT101
Isso funciona e é a melhor opção, no entanto, se (ao contrário da pergunta aqui) você estiver tentando remover um height="XX"atributo HTML
user56reinstatemonica8