Come rimuovo lo stile di altezza da un DIV usando jQuery?

85

Per impostazione predefinita, l'altezza di un DIV è determinata dal suo contenuto.

Ma lo sovrascrivo e imposto esplicitamente un'altezza con jQuery:

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

Come posso invertirlo? Voglio rimuovere lo stile di altezza e farlo tornare all'altezza automatica / naturale?

— Zack Peterson
fonte

1

Non riesco neanche a far funzionare questo. Sembra che dopo aver impostato l'altezza del div su qualcosa di specifico (come 300px o altro), non puoi reimpostare l'altezza su auto. Potrebbe essere un bug di jQuery.

— Brandon Montgomery

102

per rimuovere l'altezza:

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

come ha sottolineato John, imposta l'altezza su auto:

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

(verificato con jQuery 1.4)

— user268828
fonte

6

Hai dato tre soluzioni, posso confermare che l'impostazione dell'altezza su "" funziona, non so degli altri.

— Daniel Beardsley,

1

In jQuery 1.9 si usa "" ma nullnon si usa .

— Steve Tauber

1

Ci sono differenze sottili: 1 + 2 consente di rivedere il foglio di stlyw (se qualcosa è definito lì), 3 lo sovrascrive (poiché l'attributo impostato su auto ha la precedenza più alta)

— Frank Nocke

23

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

Mi piace usarlo, perché è simmetrico con il modo in cui hai usato esplicitamente .height (val) per impostarlo in primo luogo e funziona su tutti i browser.

— non rettangolare
fonte

2

Questo forza l'altezza ad essere l'altezza automatica, sovrascrivendo qualsiasi regola CSS esistente. Potrebbe andare bene in alcuni casi specifici, ma in generale potrebbe causare problemi.

— Bennett McElwee,

@BennettMcElwee In realtà sto lottando con il problema che hai descritto ora. Quindi +1 per quello.

— Native Coder

19

forse qualcosa di simile

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

— John Boker
fonte

2

Ciò sovrascriverà qualsiasi regola CSS esistente che dovrebbe essere applicata, il che potrebbe essere un problema.

— Bennett McElwee,

19

puoi provare questo:

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

— schtsch
fonte

4

dovrebbe essere corretto in quanto questo rimuove il valore di stile css (), è utile per il ridimensionamento con js :) Saluti, grazie

— Szymon

14

Per ripristinare l'altezza del div, prova

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

— SvenFinke
fonte

Questo è un duplicato della risposta di @ nonrettangolare, che precede questa modifica.

— Bennett McElwee

3

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

— Rana Nematollahi
fonte

0

solo per aggiungere alle risposte qui, stavo usando l'altezza come funzione con due opzioni o specificare l'altezza se è inferiore all'altezza della finestra o impostarla di nuovo su auto

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

Avevo bisogno di centrare il contenuto verticalmente se era più piccolo dell'altezza della finestra oppure lasciarlo scorrere in modo naturale, quindi questo è ciò che mi è venuto in mente

— John Ruddell
fonte

0

Grazie ragazzi per aver mostrato tutti questi esempi. Dopo aver provato i tuoi esempi, avevo ancora problemi con la mia pagina dei contatti su schermi di piccoli media come sotto i 480 px. Bootstrap ha continuato a inserire height: auto.

Element Inspector / Devtools mostrerà l'altezza in:

element.style {

}

Nel mio caso vedevo: section#contact.contact-container | 303 x 743nella finestra del browser.

Quindi il seguente full-length funziona per eliminare il problema:

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

— Thomas Cayne
fonte

-6

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

— rahul
fonte

non penso che questo funzionerà per uno stile di altezza CSS incorporato all'interno di un attributo di stile ...

— topwik

Se non altro, vorresti removeAttr ("style")

— jigglyT101

Questo funziona ed è l'opzione migliore, tuttavia, se (a differenza della domanda qui) stai cercando di rimuovere un height="XX"attributo HTML

— user56reinstatemonica8