Wie entferne ich den Höhenstil mit jQuery aus einem DIV?

85

Standardmäßig wird die Höhe eines DIV durch seinen Inhalt bestimmt.

Aber ich überschreibe das und setze explizit eine Höhe mit jQuery:

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

Wie kann ich das umkehren? Ich möchte den Höhenstil entfernen und ihn auf seine automatische / natürliche Höhe zurücksetzen.

Zack Peterson
quelle
1
Ich kann das auch nicht zum Laufen bringen. Es scheint, dass Sie, nachdem Sie die Höhe des Div auf einen bestimmten Wert eingestellt haben (z. B. 300 Pixel oder was auch immer), die Höhe nicht mehr auf Auto zurücksetzen können. Könnte ein jQuery-Fehler sein.
Brandon Montgomery

Antworten:

102

um die Höhe zu entfernen:

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

Stellen Sie, wie John betonte, die Höhe auf auto:

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

(überprüft mit jQuery 1.4)

user268828
quelle
6
Sie haben drei Lösungen angegeben. Ich kann bestätigen, dass das Einstellen der Höhe auf "" funktioniert. Ich weiß nichts über die anderen.
Daniel Beardsley
1
In jQuery 1.9 wird '' verwendet, nulljedoch nicht.
Steve Tauber
1
Es gibt subtile Unterschiede: 1 + 2 lässt das Stlyesheet revidieren (wenn dort etwas definiert ist), 3 überschreibt es (da das Attribut auto eine höhere Priorität hat)
Frank Nocke
23
$('div#someDiv').height('auto');

Ich benutze dies gerne, weil es symmetrisch zu der Art und Weise ist, wie Sie .height (val) explizit verwendet haben, um es an erster Stelle festzulegen, und browserübergreifend funktioniert.

nicht rechteckig
quelle
2
Dadurch wird die Höhe zur automatischen Höhe und überschreibt alle vorhandenen CSS-Regeln. Das mag in bestimmten Fällen in Ordnung sein, kann aber im Allgemeinen zu Problemen führen.
Bennett McElwee
@BennettMcElwee Ich habe tatsächlich Probleme mit dem Problem, das Sie jetzt beschrieben haben. Also +1 dafür.
Native Coder
19

vielleicht so etwas wie

$('div#someDiv').css("height", "auto");
John Boker
quelle
2
Dadurch werden alle vorhandenen CSS-Regeln überschrieben, die gelten sollten, was möglicherweise ein Problem darstellt.
Bennett McElwee
19

Sie können dies versuchen:

$('div#someDiv').height('');
schtsch
quelle
4
Das sollte die richtige Antwort sein, da diese den Wert im css () -Stil entfernt. Es ist nützlich, die Größe mit js zu ändern :) Prost, danke
Szymon
14

Um die Höhe des Div zurückzusetzen, versuchen Sie es einfach

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

SvenFinke
quelle
Dies ist ein Duplikat der Antwort von @ nonrectangular, die vor dieser Bearbeitung erstellt wurde.
Bennett McElwee
3
$('div#someDiv').css('height', '');
Rana Nematollahi
quelle
0

Um die Antworten hier zu ergänzen, habe ich die Höhe als Funktion mit zwei Optionen verwendet. Geben Sie entweder die Höhe an, wenn sie kleiner als die Fensterhöhe ist, oder setzen Sie sie wieder auf Auto

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

Ich musste den Inhalt vertikal zentrieren, wenn er kleiner als die Fensterhöhe war, oder ihn natürlich scrollen lassen, damit ich mir das einfallen ließ

John Ruddell
quelle
0

Vielen Dank, dass Sie all diese Beispiele gezeigt haben. Ich hatte immer noch Probleme mit meiner Kontaktseite auf kleinen Medienbildschirmen wie unter 480 Pixel, nachdem ich Ihre Beispiele ausprobiert hatte. Bootstrap wurde weiter eingefügt height: auto.

Element Inspector / Devtools zeigt die Höhe in:

element.style {

}

In meinem Fall sah ich: section#contact.contact-container | 303 x 743im Browserfenster.

Das folgende Programm in voller Länge behebt das Problem:

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

Thomas Cayne
quelle
-6
$('div#someDiv').removeAttr("height");
rahul
quelle
Ich glaube nicht, dass dies für einen
CSS-Höhenstil
Wenn überhaupt, möchten Sie Attr ("style")
jigglyT101
Dies funktioniert und ist die beste Option, wenn Sie (im Gegensatz zu der Frage hier) versuchen, ein height="XX"HTML-Attribut zu entfernen
user56reinstatemonica8