Machen Sie einen TextArea füllen Sie den Rest der Seite vertikal?

Gibt es eine einfache Möglichkeit, die Höhe einer Füllung auf die Höhe der Seite zu bringen?Machen Sie einen TextArea füllen Sie den Rest der Seite vertikal?

Quelle

2009-11-28 Evan Fosmark

[notepad.cc] (http://notepad.cc/) demonstriert diesen Effekt - Sie können versuchen, herauszufinden, wie sie es tun. Ihre Methode ändert die Größe der Textfläche, wenn das Fenster in der Größe geändert wird, und funktioniert sogar, wenn JavaScript deaktiviert ist. Ich bin mir nicht sicher, ob es darauf ankommt, die Höhe des Inhalts über und unter dem Textfeld zu kennen. –

Ich denke, es ist wichtig zu verstehen, dass die Einstellung height: 100% für eine Textarea funktioniert nur in IE, wenn Sie explizit auf Quirks-Modus festlegen, obwohl es wie erwartet in Firefox funktioniert. Das W3C stellt fest, dass die Größe eines Textfeldes in Reihen definiert ist, anstatt Pixel usw.

unten Dargestellt ist eine einfache Möglichkeit, um sicherzustellen, dass die Größe der Textarea immer die gesamte Körperhöhe einnimmt, unter Berücksichtigung die Godillions von Benutzer installierten Symbolleisten, etc., Bildschirmauflösungen variieren und möglicherweise sogar Fenster in der Größe geändert. Der Schlüssel ist die einfache JS-Methode und ihre Platzierung. Das Formular dient nur dazu, normale Textfelder und Etiketten zu simulieren.

<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>

Kopieren Sie es und fügen Sie es in eine neue Seite ein. Es funktioniert sowohl in FF als auch in IE.

Hoffe, das hilft!

Quelle

2009-11-29 01:12:39 PortageMonkey

Hier ist [die W3C-Spezifikation für das 'textarea'-Element] (http://www.w3.org/TR/html5/the-textarea-element.html#the-textarea-element). Ich sehe nicht, wo es heißt, dass die Größe einer Textfläche in Zeilen * und nicht in Pixeln definiert ist, also verstehe ich nicht, was Sie damit meinen. Ja, es beginnt so groß wie eine bestimmte Anzahl von Zeilen, dank des Attributs 'rows', aber danach können Sie ihm die gewünschte Höhe geben, zum Beispiel mit dem CSS '#area {height: 100px; } '. –

[JS Bin dieser Antwort] (http://jsbin.com/ugosup/1/edit). Sowohl in Firefox als auch in Chrome funktioniert es für mich in der [Codeansicht] (http://jsbin.com/ugosup/1/edit), schlägt aber in der [ganzseitigen Ansicht] fehl (http://jsbin.com/ ugosup/1). –

Machen Sie einen TextArea füllen Sie den Rest der Seite vertikal?

Antwort

Verwandte Themen