TextArea가 나머지 페이지를 수직으로 채우도록 만드시겠습니까?

페이지의 높이까지 채우기 높이를 만드는 쉬운 방법이 있습니까?TextArea가 나머지 페이지를 수직으로 채우도록 만드시겠습니까?

2009-11-28 Evan Fosmark

[notepad.cc] (http://notepad.cc/)는이 효과를 보여줍니다. 어떻게 수행하는지 알아낼 수 있습니다. 이 메서드는 창 크기를 조정할 때 텍스트 영역의 크기를 조정하고 JavaScript가 비활성화되어있는 동안에도 작동합니다. 내가 textarea 위와 아래 내용의 높이를 아는 것에 의존하는지 확실하지 않습니다. –

textarea에 대해 height: 100%을 설정하는 것이 Firefox에서 예상대로 작동하지만 명시 적으로 quirks 모드로 설정하면 IE에서만 작동한다는 것을 이해하는 것이 중요하다고 생각합니다. W3C는 텍스트 영역의 크기, 아래 그림

을 고려하여, 텍스트 영역 의 크기가 항상 몸 전체 높이를 차지되도록하는 쉬운 방법 등 픽셀보다는 열로 정의한다고 사용자가 설치 한 툴바의 고집, 다양한 모니터 해상도 및 경우에 따라 크기가 조정 된 윈도우 등이 있습니다. 핵심은 간단한 JS 방법 및 배치입니다. 양식은 정상적인 텍스트 상자 및 레이블을 시뮬레이트하기위한 것입니다.

<html> 
    <head runat="server"><title>Look, Mom! No Scrollbars!</title></head> 
    <body onload="resizeTextArea()" onresize="resizeTextArea()"> 
     <form id="form1" runat="server"> 
      <div id="formWrapper" style="height:200px"> 
       <input type="text" value="test" /> 
       <input type="text" value="test" /> 
      </div> 
      <textarea id="area" style="width: 100%"></textarea> 
     </form> 

     <script type="text/javascript"> 
      function resizeTextArea() { 
       //Wrap your form contents in a div and get its offset height 
       var heightOfForm = document.getElementById('formWrapper').offsetHeight; 
       //Get height of body (accounting for user-installed toolbars) 
       var heightOfBody = document.body.clientHeight; 
       var buffer = 35; //Accounts for misc. padding, etc. 
       //Set the height of the textarea dynamically 
       document.getElementById('area').style.height = 
        (heightOfBody - heightOfForm) - buffer; 
       //NOTE: For extra panache, add onresize="resizeTextArea()" to the body 
      } 
     </script> 
    </body> 
</html>

복사하여 새 페이지에 붙여 넣으십시오. FF와 IE 모두에서 작동합니다.

희망이 도움이됩니다.

출처

2009-11-29 01:12:39 PortageMonkey

다음은 [textarea 요소에 대한 W3C 규격] (http://www.w3.org/TR/html5/the-textarea-element.html#the-textarea-element)입니다. 텍스트 영역의 크기가 픽셀이 아닌 행 *에 정의되어있는 것을 어디서 볼 수 있는지 모르겠으므로 그 의미를 이해하지 못합니다. 예,'rows' 속성 덕분에 몇 개의 행만큼 키가 커지지 만, 그 후에는 원하는 높이로 지정할 수 있습니다. 예를 들어, CSS'#area {height : 100px; }'. –

[이 답변의 JS Bin] (http://jsbin.com/ugosup/1/edit). Firefox와 Chrome에서 모두 [코드보기] (http://jsbin.com/ugosup/1/edit)에서 작동하지만 [전체 페이지보기]에서는 실패합니다 (http://jsbin.com/ ugosup/1). –

TextArea가 나머지 페이지를 수직으로 채우도록 만드시겠습니까?

답변

관련 문제