TextAreaをページの残りの部分に垂直に塗りつぶすようにしますか？

ページの高さまで塗りつぶしの高さを設定する簡単な方法はありますか？TextAreaをページの残りの部分に垂直に塗りつぶすようにしますか？

2009-11-28 Evan Fosmark

[notepad.cc]（http://notepad.cc/）は、この効果を実証しています。それらのメソッドは、ウィンドウがサイズ変更されたときにテキストエリアのサイズを変更し、JavaScriptが無効のときでも機能します。テキストエリアの上と下のコンテンツの高さを知っているかどうかはわかりません。 –

テキストエリアの設定をheight: 100%にすることは、明示的に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の両方で、[code view]（http://jsbin.com/ugosup/1/edit）で動作しますが、[フルページビュー]（http://jsbin.com/ ugosup/1）。 –

TextAreaをページの残りの部分に垂直に塗りつぶすようにしますか？

答えて

関連する問題