명시적인 CSS 규칙 없이 Div 높이 결정

CSS에 높이가 명시적으로 설정되지 않은 경우 div의 높이를 가져오는 것이 어려울 수 있습니다. 이를 위해 일반적으로 .height() jQuery 메서드가 사용되지만 적절한 기능을 위해서는 기존 CSS 규칙이 필요합니다. 대체 접근 방식은 다음과 같습니다.

jQuery 높이 함수

jQuery는 CSS 높이 규칙 없이도 정확한 높이 측정을 제공할 수 있는 다양한 높이 함수를 제공합니다.

• .height(): 패딩, 테두리 및 제외 margin.
• .innerHeight(): 패딩을 포함하지만 테두리와 여백은 제외합니다.
• .outerHeight(): 테두리는 포함하지만 여백은 제외합니다.
• .outerHeight(true): 포함 margin.

사용 데모

아래 코드 조각은 이러한 기능을 사용하는 방법을 보여줍니다.

$(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의 계산된 높이는 div 자체에 표시되어 각 함수의 출력에 대한 자세한 정보를 제공합니다.