¿Hace un área de texto para llenar el resto de la página verticalmente?

¿Hay alguna manera fácil de aumentar la altura de un relleno hasta la altura de la página?¿Hace un área de texto para llenar el resto de la página verticalmente?

Fuente

2009-11-28 Evan Fosmark

[notepad.cc] (http://notepad.cc/) demuestra este efecto: puede intentar averiguar cómo lo hacen. Su método cambia el tamaño del área de texto en vivo cuando se cambia el tamaño de la ventana y funciona incluso cuando JavaScript está desactivado. No estoy seguro si se basa en saber la altura del contenido arriba y debajo del área de texto. –

Creo que es importante comprender que la configuración height: 100% para un área de texto solo funcionará en IE si lo configura explícitamente en el modo peculiar, aunque funciona como se espera en Firefox. El W3C establece que el tamaño de un área de texto se define en filas en lugar de píxeles, etc.

mostrada a continuación es una manera fácil de asegurar que el tamaño de la área de texto siempre ocupa toda la altura del cuerpo, teniendo en cuenta los godzillions de las barras de herramientas instaladas por el usuario, etc., que varían las resoluciones del monitor y, posiblemente, incluso el tamaño de las ventanas. La clave es el método JS simple y su ubicación. El formulario está allí para simular cuadros de texto y etiquetas 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>

Cópielo y péguelo en una página nueva. Funciona tanto en FF como en IE.

Espero que esto ayude!

Fuente

2009-11-29 01:12:39 PortageMonkey

Aquí está [la especificación W3C para el elemento 'textarea'] (http://www.w3.org/TR/html5/the-textarea-element.html#the-textarea-element). No veo dónde dice que el tamaño de un área de texto se define en filas * en lugar de * píxeles, por lo que no entiendo qué quiere decir con eso. Sí, comienza tan alto como algunas filas, gracias al atributo 'rows', pero después de eso, puedes darle la altura que quieras, por ejemplo, con CSS' #area {height: 100px; } ' –

[JS Bin de esta respuesta] (http://jsbin.com/ugosup/1/edit). Tanto en Firefox como en Chrome, funciona para mí en la [vista de código] (http://jsbin.com/ugosup/1/edit) pero falla en la [vista de página completa] (http://jsbin.com/ ugosup/1). –

¿Hace un área de texto para llenar el resto de la página verticalmente?

Respuesta

Cuestiones relacionadas