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

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에 추가 되고 표시 되는지 확인합니다 .

참고 URL : https://stackoverflow.com/questions/9592575/get-height-of-div-with-no-height-set-in-css