innerHTML을 mootools로 설정 한 후 div 크기를 조정하십시오.

Question

간단한 페이지에서 mootools 1.2를 사용하고 있습니다. JS/ajax를 통해 제출 된 양식 (formdiv)을 표시하는 div가 있습니다. ajax 요청은 일부 데이터 "확인 메시지"를 반환합니다.

그러나 formdiv div는 양식 요소를 수용하기 위해 아마도 500px 높이부터 시작합니다. Ajax 요청이 가변 길이 반환 데이터 ("제출 확인 됨!")를 반환하면 div는 500px로 높게 유지되어 많은 여유 공간을 남깁니다.

제 질문은 innerHTML을 사용하여 콘텐츠를 업데이트 한 후 div에 새 콘텐츠를 맞추기위한 방법이 있습니까?

감사

편집 : Ajax 호출에 의해 반환 된 데이터가 그래서 그것을 특정 높이하고 그 높이 사업부를 재설정 할 수 있습니다지지 않습니다 변수 length-- 될 수 있다고 추가 할 수 있습니다.

Answer 1

div이 CSS를 사용하여 미리 정의 된 높이로 시작하는 경우 높이를 auto으로 설정하거나 인라인으로 설정했을 때 스타일을 모두 지우는 것입니다.

확인 this JSFiddle

은 (는 여기에 jQuery를 함께 작동하지만,이 질문에 div 렌더링 브라우저에 올 때 그 문제가되지 않습니다) 나는이 늦게 년처럼 실현 좋아

Answer 2

하지만이 질문에 잠시 건너 온 이 작업을 수행 할 스크립트를 찾으려고합니다. 이것은 훌륭한 출발점했지만, 난 내가 선택한 방법은 사용하는 공유해야처럼 느꼈다 :

1. 는 $('element')의 현재 실제 높이를 가져옵니다.

   h.before = $('element').getSize().y; 
   

2. Fx.Morph 그래서 먼저 $('element')에 height: 'auto'을 설정 (경우에 이미되지 않았습니다) 다음 새 내용에 HTML을 설정해야 height'auto'에 설정을 처리 할 수 ​​없습니다. 이렇게하면 새 콘텐츠의 높이를 얻을 수 있습니다.

   $('element').setStyle('height', 'auto'); 
   $('element').set('html', "Some other content.<br/>Very short."); 
   h.after = $('element').getSize().y; 
   

3. 는 높이를 재설정하고 h.after으로 Fx.Morph를 시작합니다. 이 방법은 매우 기본이며 많은이 사이트 준비하기 위해 수행해야 할 것입니다 http://jsfiddle.net/cd4R9/

   이해하십시오

   $('element').setStyle('height', h.before); 
   
   var myEffect = new Fx.Morph('element', { 
       onComplete: function() { 
        $('test').setStyle('height', 'auto'); 
       } 
   }); 
   
   myEffect.start({'height': h.after}); 
   

당신은 여기에 전체 코드를 확인할 수 있습니다. 예를 들어 $('element')에 패딩이있는 경우이를 고려하거나 CSS 속성 box-sizing: border-box;을 사용해야합니다. 희망이 도움이됩니다.