Faire un TextArea remplir le reste de la page verticalement?

Existe-t-il un moyen facile de faire la hauteur d'un remplissage jusqu'à la hauteur de la page?Faire un TextArea remplir le reste de la page verticalement?

Source

2009-11-28 Evan Fosmark

[notepad.cc] (http://notepad.cc/) démontre cet effet - vous pouvez essayer de comprendre comment ils le font. Leur méthode redimensionne le textarea en direct lorsque la fenêtre est redimensionnée et fonctionne même si JavaScript est désactivé. Je ne suis pas sûr si cela dépend de connaître la hauteur du contenu au-dessus et au-dessous de la zone de texte. –

Je pense qu'il est important de comprendre que le réglage height: 100% pour un textarea ne fonctionnera dans IE que si vous le définissez explicitement en mode quirks, bien qu'il fonctionne comme prévu dans Firefox. Le W3C indique que la taille d'une zone de texte est défini dans les lignes plutôt que de pixels, etc.

ci-dessous est un moyen facile de faire en sorte que la taille de la zone de texte toujours prend toute la hauteur du corps, en tenant compte les godzillions de barres d'outils installées par l'utilisateur, etc., variant les résolutions du moniteur et éventuellement les fenêtres redimensionnées. La clé est la méthode JS simple et son placement. Le formulaire est juste là pour simuler des zones de texte et des étiquettes normales.

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

Copiez et collez-le dans une nouvelle page. Cela fonctionne à la fois FF et IE.

Espérons que cela aide!

Source

2009-11-29 01:12:39 PortageMonkey

Voici [la spécification W3C pour l'élément 'textarea'] (http://www.w3.org/TR/html5/the-textarea-element.html#the-textarea-element). Je ne vois pas où il est dit que la taille d'une zone de texte est définie en lignes * plutôt qu'en pixels, donc je ne comprends pas ce que vous entendez par là. Oui, il commence aussi haut qu'un certain nombre de lignes, grâce à l'attribut 'rows', mais après cela, vous pouvez lui donner la hauteur que vous voulez, par exemple, avec le CSS' #area {height: 100px; } '. –

[JS Bin de cette réponse] (http://jsbin.com/ugosup/1/edit). Dans Firefox et Chrome, cela fonctionne pour moi dans la vue [code] (http://jsbin.com/ugosup/1/edit) mais échoue dans la [vue pleine page] (http://jsbin.com/ ugosup/1). –

Faire un TextArea remplir le reste de la page verticalement?

Répondre

Questions connexes