jQuery를 사용하여 DIV에서 높이 스타일을 어떻게 제거합니까?


85

기본적으로 DIV의 높이는 내용에 따라 결정됩니다.

그러나 나는 그것을 무시하고 jQuery를 사용하여 명시 적으로 높이를 설정합니다.

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

어떻게 되돌릴 수 있습니까? 높이 스타일을 제거하고 자동 / 자연 높이로 되돌리고 싶습니까?


1
이것도 작동하게 할 수 없습니다. div의 높이를 특정 (300px 등)으로 설정 한 후에는 높이를 다시 자동으로 설정할 수없는 것 같습니다. jQuery 버그 일 수 있습니다.
Brandon Montgomery

답변:


102

높이를 제거하려면 :

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

John이 지적한 것처럼 높이를 auto다음 과 같이 설정합니다 .

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

(jQuery 1.4로 확인)


6
세 가지 해결책을 주 셨는데, 높이를 ""로 설정 한 것을 확인할 수 있습니다. 다른 것은 모릅니다.
Daniel Beardsley 2011

1
jQuery 1.9에서는 ''를 사용하지만 사용 null하지 않습니다.
Steve Tauber 2013 년

1
미묘한 차이점이 있습니다. 1 + 2는 stlyesheet를 revices (아무것도 거기에 정의 된 경우), 3은이를 재정의합니다 (auto로 설정된 attrib이 더 높은 우선 순위를
갖기 때문에

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

처음에 .height (val)을 명시 적으로 사용하여 설정하고 브라우저에서 작동하는 방식과 대칭이기 때문에 이것을 사용하는 것을 좋아합니다.


2
이렇게하면 높이가 자동 높이가되어 기존 CSS 규칙이 무시됩니다. 특정 상황에서는 괜찮을 수 있지만 일반적으로 문제가 발생할 수 있습니다.
Bennett McElwee 2015 년

@BennettMcElwee 실제로 지금 설명한 문제로 어려움을 겪고 있습니다. 그래서 +1.
Native Coder

20

당신은 이것을 시도 할 수 있습니다 :

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

4
이것은 css () 스타일 값을 제거하므로 올바른 anwser 여야합니다. js로 크기를 조정하는 데 유용합니다. :) 건배, 감사합니다
Szymon




0

여기에 대답을 추가하기 위해 높이를 두 가지 옵션으로 사용하여 창 높이보다 작은 경우 높이를 지정하거나 자동으로 다시 설정했습니다.

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

콘텐츠가 창 높이보다 작 으면 콘텐츠를 세로로 중앙에 배치하거나 자연스럽게 스크롤되도록해야했습니다.


0

모든 예를 보여 주신 여러분 감사합니다. 나는 한 여전히 당신의 예를 시도한 후 480 픽셀 아래 같은 작은 미디어 화면에서 내 연락처 페이지에 문제가 있습니다. 부트 스트랩은 height: auto.

Element Inspector / Devtools는 다음 위치에 높이를 표시합니다.

element.style {

}

제 경우 section#contact.contact-container | 303 x 743에는 브라우저 창에서 보았습니다 .

따라서 다음 전체 길이는 문제를 해결하기 위해 작동합니다.

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


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

나는 이것이 aa 스타일 속성 내에 포함 된 CSS 높이 스타일에 대해 작동하지 않을 것이라고 생각합니다 ...
topwik

무엇이든 제거하고 싶을 것입니다
.Attr

이 작업을 수행하고, 최선의 선택은 (여기에 질문 달리) 당신이 제거하려는 경우입니다 height="XX"HTML 속성을
user56reinstatemonica8
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.