¿Cómo elimino el estilo de altura de un DIV usando jQuery?

85

De forma predeterminada, la altura de un DIV está determinada por su contenido.

Pero, anulo eso y establezco explícitamente una altura con jQuery:

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

¿Cómo puedo revertir eso? ¿Quiero eliminar el estilo de altura y hacer que vuelva a su altura automática / natural?

Zack Peterson
fuente
1
Tampoco puedo hacer que esto funcione. Parece que después de establecer la altura del div en algo específico (como 300px o lo que sea), no puede volver a establecer la altura en automático. Podría ser un error de jQuery.
Brandon Montgomery

Respuestas:

102

para quitar la altura:

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

como señaló John, establezca la altura en auto:

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

(comprobado con jQuery 1.4)

user268828
fuente
6
Diste tres soluciones, puedo confirmar que la configuración de la altura en "" funciona, no sé las otras.
Daniel Beardsley
1
En jQuery 1.9 usando '' pero usando nullno.
Steve Tauber
1
Hay diferencias sutiles: 1 + 2 permite revisar la hoja de estilo ww (si se define algo allí), 3 la anula (ya que el atributo establecido en automático tiene mayor prioridad)
Frank Nocke
23
$('div#someDiv').height('auto');

Me gusta usar esto, porque es simétrico con cómo usaste explícitamente .height (val) para configurarlo en primer lugar, y funciona en todos los navegadores.

no rectangular
fuente
2
Esto obliga a que la altura sea la altura automática, anulando cualquier regla CSS existente. Eso puede estar bien en algunos casos específicos, pero en general podría causar problemas.
Bennett McElwee
@BennettMcElwee En realidad estoy luchando con el problema que describiste ahora. Entonces +1 por eso.
Codificador nativo
19

tal vez algo como

$('div#someDiv').css("height", "auto");
John Boker
fuente
2
Eso anulará cualquier regla CSS existente que deba aplicarse, lo que puede ser un problema.
Bennett McElwee
19

puedes probar esto:

$('div#someDiv').height('');
Schtsch
fuente
4
eso debería ser una respuesta correcta, ya que este elimina el valor de estilo css (), es útil para cambiar el tamaño con js :) Saludos, gracias
Szymon
14

Para restablecer la altura del div, intente

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

SvenFinke
fuente
Este es un duplicado de la respuesta de @ nonrectangular, que es anterior a esta edición.
Bennett McElwee
3
$('div#someDiv').css('height', '');
Rana Nematollahi
fuente
0

solo para agregar a las respuestas aquí, estaba usando la altura como una función con dos opciones, ya sea especificar la altura si es menor que la altura de la ventana, o volver a configurarla en automático

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

Necesitaba centrar el contenido verticalmente si era más pequeño que la altura de la ventana o dejar que se desplazara naturalmente, así que esto es lo que se me ocurrió.

John Ruddell
fuente
0

Gracias a todos por mostrar todos esos ejemplos. Estaba aún teniendo problemas con mi página de contacto en las pequeñas pantallas de los medios de comunicación, como a continuación 480px después de probar sus ejemplos. Bootstrap siguió insertando height: auto.

Element Inspector / Devtools mostrará la altura en:

element.style {

}

En mi caso estaba viendo: section#contact.contact-container | 303 x 743en la ventana del navegador.

Entonces, el siguiente trabajo completo para eliminar el problema:

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

Thomas Cayne
fuente
-6
$('div#someDiv').removeAttr("height");
rahul
fuente
No creo que esto funcione para un estilo de altura CSS que está incrustado en un atributo de estilo ...
topwik
En todo caso, querría eliminarAttr ("estilo")
jigglyT101
Esto funciona y es la mejor opción, sin embargo, si (a diferencia de la pregunta aquí) está intentando eliminar un height="XX"atributo HTML
user56reinstatemonica8