CSS에 높이가 설정되지 않은 div의 높이를 가져옵니다.

CSS에 높이가 설정되지 않은 div의 높이를 가져옵니다.

사용할 수 없는 요소에 대해 CSS 높이 규칙이 설정되어 있지 않다면 요소의 높이를 얻을 수 있는 방법이 있습니까?.height()먼저 CSS 규칙 세트가 필요해서 jQuery method?키를 잡을 수 있는 다른 방법은 없습니까?

jQuery.height요소의 높이를 반환합니다.계산된 높이를 결정하기 때문에 CSS 정의가 필요 없습니다.

데모

사용가능.height(),.innerHeight()아니면outerHeight()필요한 것을 기준으로 합니다.

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

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

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

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

라이브 데모는 아래 코드 스니펫을 확인합니다.:)

$(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>

다른 사람들도 같은 문제를 겪었을 때를 대비해서 메모해 두세요.

저도 같은 문제가 있었는데 다른 답을 찾았습니다.div의 높이는 window.load 또는 window.scroll not document.ready에서 시작해야 합니다. 그렇지 않으면 이미지가 로드되기 전에 홀수 높이/작은 높이를 얻을 수 있습니다.아우터도 사용했습니다.높이().

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