scrollWidth/scrollHeight 유효 치수를

Question

을 제공 :

에 관계없이 그것의 많은 현재 표시 방법, 내용의 실제 크기를 알고 싶다면, 당신은 scrollWidth를 사용해야하고 scrollHeight 속성

그래서 scrollWidth 및 scrollHeight 속성을 사용하여 요소의 실제 크기 (jsfiddle)로 크기를 조정합니다.

HTML :

<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</textarea> 

자바 스크립트 :

(function ($) { 
    $(document).ready(function() { 
     $('textarea').css({ 
      width: $('textarea')[0].scrollWidth, 
      height: $('textarea')[0].scrollHeight 
     }); 
    }); 
})(jQuery); 

나는 내용의 실제 크기로 크기를 설정하면 그 크기는 큰 것 같은 요소가 더 스크롤바가없는 것이라고 생각할 겁니다 콘텐츠가 오버 플로우하지 않을 정도로 충분합니다. 권리?

IE : 다음 이미지에서 볼 수 있듯이

는하지만 제대로 작동하지 않습니다 i.stack.imgur.com/lKxoz.png : 그래서 당신이이 이미지에서 볼 방법이 있어야한다 : i.stack.imgur.com/JXt0e.png

크롬 : i.stack.imgur.com/emGyG.png

오페라 : i.stack.imgur.com/7MAX5.png

내 질문은 입니다 scrollWidth 및 scrollHeight 속성에 문제가 있습니까? 그들은 저에게 유효하지 않은 치수를줍니다!

Answer 1

매우 복잡했습니다. scrollHeight 및 scrollWidth 속성은 스크롤 할 수있는 요소 내부의 너비와 높이와 같습니다. 따라서 해당 요소의 height 및 을 scrollWidth 및 scrollHeight으로 설정하면 문제를 해결할 수 있습니다. fiddle here

Answer 2

문제에

var textarea = document.getElementsByTagName('textarea')[0]; 
textarea.style.height = textarea.scrollHeight + 'px'; 
textarea.style.width = texyarea.scrollWidth + 'px'; 

봐 당신이 스크롤바의 크기를 포함하지 않을 것입니다. '오버플로'를 '숨김'으로 설정하거나 스크롤 막대의 크기를 추가하면 효과가 있습니다. 그 크기를 계산하는 방법이 있습니다, 구글이 당신을 도울 것입니다. 테스트 목적으로 Windows 및 17px에서 Chrome을 사용하십시오.
이 스 니펫을 사용하는 컨텍스트에 따라 콘텐츠가 변경 될 때마다 크기를 재설정해야 할 수도 있습니다. 텍스트 영역에 고정 너비를 지정해야합니다. 그렇지 않으면 브라우저에서 느낀 점을 할당합니다.

(function ($) { 
    $(document).ready(function() { 
     $('textarea').css({ 
      width: $('textarea')[0].scrollWidth+'px', 
      height: $('textarea')[0].scrollHeight+'px', 
      overflow: 'hidden' 
     }); 
    }); 
})(jQuery);