web-dev-qa-db-ja.com

jQueryを使用してDIVから高さスタイルを削除するにはどうすればよいですか？

デフォルトでは、DIVの高さはその内容によって決まります。

しかし、私はそれをオーバーライドし、jQueryで明示的に高さを設定します。

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

どうすればそれを元に戻すことができますか？高さスタイルを削除して、自動/自然な高さに戻したいですか？

jqueryhtmlcsslayout
85
Zack Peterson

高さを削除するには：

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

ジョンが指摘したように、高さをautoに設定します：

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

（jQuery 1.4でチェック）

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

これは、.height（val）を明示的に使用して最初に設定する方法と対称的であり、ブラウザー間で機能するため、これを使用するのが好きです。

22
nonrectangular

たぶん何かのような

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

これを試すことができます：

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

Divの高さをリセットするには、試してください

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

14
SvenFinke
$('div#someDiv').css('height', '');
3
Rana Nematollahi

それらの例をすべて見せてくれてありがとう。私はstill例を試した後、480px未満のような小さなメディア画面の連絡先ページで問題が発生しました。 Bootstrapは_height: auto_を挿入し続けました。

Element Inspector/Devtoolsは、高さを以下に表示します：

_element.style {

}
_

私の場合、ブラウザウィンドウに_section#contact.contact-container | 303 x 743_と表示されていました。

したがって、次のフルレングスは問題を排除するために機能します。

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

0
Thomas Cayne

ここに答えを追加するために、高さをウィンドウの高さよりも低い場合は高さを指定するか、自動に戻すかの2つのオプションを持つ関数として使用していました

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

ウィンドウの高さよりも小さい場合はコンテンツを垂直方向に中央揃えするか、自然にスクロールさせる必要があったので、これが思いついたものです

0
John Ruddell