Jak usunąć styl wysokości z DIV przy użyciu jQuery?

85

Domyślnie wysokość DIV jest określana na podstawie jego zawartości.

Ale nadpisuję to i jawnie ustawiam wysokość za pomocą jQuery:

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

Jak mogę to odwrócić? Chcę usunąć styl wysokości i przywrócić mu automatyczną / naturalną wysokość?

Zack Peterson
źródło
1
To też nie działa. Wygląda na to, że po ustawieniu wysokości elementu div na coś konkretnego (np. 300px lub cokolwiek innego), nie można ustawić wysokości z powrotem na auto. Może to być błąd jQuery.
Brandon Montgomery

Odpowiedzi:

102

aby usunąć wysokość:

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

jak wskazał John, ustaw wysokość na auto:

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

(sprawdzone w jQuery 1.4)

user268828
źródło
6
Podałeś trzy rozwiązania, mogę potwierdzić ustawienie wysokości na "" działa, o pozostałych nie wiem.
Daniel Beardsley
1
W jQuery 1.9 używanie '', ale używanie nullnie.
Steve Tauber
1
Istnieją subtelne różnice: 1 + 2 pozwala zrewidować arkusz graficzny (jeśli cokolwiek jest tam zdefiniowany), 3 zastępuje go (ponieważ atrybut ustawiony na auto ma wyższy priorytet)
Frank Nocke
23
$('div#someDiv').height('auto');

Lubię to używać, ponieważ jest to symetryczne ze sposobem, w jaki jawnie użyłeś .height (val), aby ustawić go w pierwszej kolejności, i działa w różnych przeglądarkach.

nieprostokątny
źródło
2
Wymusza to na wysokości automatycznej wysokości, nadpisując wszelkie istniejące reguły CSS. W niektórych przypadkach może to być w porządku, ale ogólnie może powodować problemy.
Bennett McElwee,
@BennettMcElwee Tak naprawdę zmagam się z problemem, który teraz opisałeś. Więc +1 za to.
Native Coder
19

może coś takiego

$('div#someDiv').css("height", "auto");
John Boker
źródło
2
Zastąpi to wszelkie istniejące reguły CSS, które powinny mieć zastosowanie, co może stanowić problem.
Bennett McElwee,
19

możesz spróbować tego:

$('div#someDiv').height('');
schtsch
źródło
4
to powinno być poprawne odpowiedź, bo ta usuwa wartość stylu css (), przydaje się przy zmianie rozmiaru za pomocą js :) Pozdrawiam, dzięki
Szymon
14

Aby zresetować wysokość elementu div, po prostu spróbuj

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

SvenFinke
źródło
To jest duplikat odpowiedzi @ nonrectangular, która poprzedza tę edycję.
Bennett McElwee,
3
$('div#someDiv').css('height', '');
Rana Nematollahi
źródło
0

aby dodać do odpowiedzi tutaj, użyłem wysokości jako funkcji z dwiema opcjami albo określ wysokość, jeśli jest mniejsza niż wysokość okna, albo ustaw ją z powrotem na auto

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

Musiałem wyśrodkować zawartość w pionie, jeśli była mniejsza niż wysokość okna, albo pozwolić jej przewijać się naturalnie, więc to jest to, co wymyśliłem

John Ruddell
źródło
0

Dziękuję wszystkim za pokazanie tych wszystkich przykładów. Po wypróbowaniu przykładów nadal miałem problemy z moją stroną kontaktową na małych ekranach multimedialnych, takich jak poniżej 480 pikseli. Bootstrap ciągle się wsuwał height: auto.

Inspektor elementów / Devtools pokaże wysokość w:

element.style {

}

W moim przypadku widziałem: section#contact.contact-container | 303 x 743w oknie przeglądarki.

Tak więc następująca pełna długość działa w celu wyeliminowania problemu:

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

Thomas Cayne
źródło
-6
$('div#someDiv').removeAttr("height");
rahul
źródło
nie sądzę, żeby to zadziałało dla stylu wysokości css, który jest osadzony w atrybucie stylu aa ...
topwik
Jeśli już, chciałbyś usunąćAttr ("style")
jigglyT101,
To działa i jest najlepszą opcją, jednak jeśli (w przeciwieństwie do tego pytania) próbujesz usunąć height="XX"atrybut HTML
user56reinstatemonica8