CSS에 높이가 설정되지 않은 div의 높이 가져 오기

.height()CSS 규칙 집합이 먼저 필요하기 때문에 jQuery 메서드를 사용할 수없는 요소에 대한 CSS 높이 규칙 집합이없는 경우 요소의 높이를 가져올 수있는 방법이 있습니까? 높이를 얻는 다른 방법이 있습니까?

jQuery .height는 요소의 높이를 반환합니다. 계산 된 높이를 결정하므로 CSS 정의가 필요하지 않습니다.

데모

.height(), .innerHeight()또는 outerHeight()필요한 것을 사용할 수 있습니다 .

.height() -패딩, 테두리 및 여백을 제외한 요소의 높이를 반환합니다.

.innerHeight() -요소의 높이에 패딩이 포함되지만 테두리와 여백은 제외됩니다.

.outerHeight() -테두리를 포함한 div의 높이를 반환하지만 여백은 제외합니다.

.outerHeight(true) -여백을 포함하여 div의 높이를 반환합니다.

라이브 데모는 아래 코드 스 니펫을 확인하십시오. :)

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

다른 사람들이 같은 문제를 겪을 경우를 대비하여 메모하십시오.

나는 같은 문제가 있었고 다른 답을 찾았습니다. 나는 높이가 내용의 요구에 의해 결정되는 사업부의 높이를 받고하는 것은에서 시작하는 것을 발견 window.load , 또는 window.scroll 하지 document.ready 이미지를로드하기 전에, 그렇지 않으면 내가 즉, 홀수 높이 / 작은 높이를 얻을. 나는 또한 outerHeight ()를 사용했습니다 .

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});

jQuery 에서 이것을 할 수 있습니다. 모든 옵션을 시도 .height(), .innerHeight()또는 .outerHeight().

$('document').ready(function() {
    $('#right_div').css({'height': $('#left_div').innerHeight()});
});

스크린 샷 예

도움이 되었기를 바랍니다. 감사!!

또한 div가 현재 DOM에 추가 되고 표시 되는지 확인합니다 .