एक टेक्स्ट एरिया को शेष पृष्ठ को लंबवत भरें?

क्या पृष्ठ की ऊंचाई तक भरने की ऊंचाई बनाने का कोई आसान तरीका है?एक टेक्स्ट एरिया को शेष पृष्ठ को लंबवत भरें?

2009-11-28 Evan Fosmark

[notepad.cc] (http://notepad.cc/) इस प्रभाव को प्रदर्शित करता है - आप यह पता लगाने की कोशिश कर सकते हैं कि वे इसे कैसे करते हैं। जब विंडो का आकार बदलता है और जावास्क्रिप्ट अक्षम होने पर भी काम करता है तो उनकी विधि टेक्स्टरेरा का आकार बदलती है। मुझे यकीन नहीं है कि यह टेक्स्टरेरा के ऊपर और नीचे सामग्री की ऊंचाई जानने पर निर्भर करता है। –

मुझे लगता है कि यह समझना महत्वपूर्ण है कि टेक्स्टरा के लिए height: 100% सेटिंग केवल आईई में काम करेगी यदि आप स्पष्ट रूप से इसे क्विर्क मोड में सेट करते हैं, हालांकि यह फ़ायरफ़ॉक्स में अपेक्षित काम करता है। W3C कहा गया है कि एक पाठ क्षेत्र के आकार, बल्कि पिक्सेल से पंक्तियों में परिभाषित किया गया है आदि

नीचे दिखाया गया है यह सुनिश्चित करें कि पाठ क्षेत्र का आकार हमेशा पूरे शरीर ऊंचाई तक ले जाता है एक आसान तरीका है ध्यान में रखते हुए उपयोगकर्ता द्वारा स्थापित टूलबार, आदि के गॉडज़िलियन, अलग-अलग मॉनिटर संकल्प और संभावित रूप से विंडोज़ का आकार बदलते हैं। कुंजी सरल जेएस विधि और इसकी नियुक्ति है। फॉर्म सामान्य टेक्स्टबॉक्स और लेबल अनुकरण करने के लिए बस है।

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

इसे एक नए पृष्ठ में कॉपी और पेस्ट करें। यह एफएफ और आईई दोनों में काम करता है।

आशा है कि इससे मदद मिलती है!

स्रोत

2009-11-29 01:12:39 PortageMonkey

यहां [textarea तत्व के लिए W3C spec] है (http://www.w3.org/TR/html5/the-textarea-element.html#the-textarea-element)। मुझे नहीं लगता कि यह कहां कहता है कि टेक्स्टरेरा का आकार * पिक्सल की बजाय पंक्तियों में परिभाषित किया गया है, इसलिए मुझे समझ में नहीं आता कि इसका मतलब क्या है। हां, यह पंक्तियों की कुछ संख्या के रूप में लंबा है, 'पंक्तियों' विशेषता के लिए धन्यवाद, लेकिन इसके बाद, आप इसे जो भी ऊंचाई चाहते हैं उसे देने में सक्षम हैं, उदाहरण के लिए, सीएसएस '#area {ऊंचाई: 100px; } '। –

[इस उत्तर के जेएस बिन] (http://jsbin.com/ugosup/1/edit)। फ़ायरफ़ॉक्स और क्रोम दोनों में, यह मेरे लिए [कोड दृश्य] (http://jsbin.com/ugosup/1/edit) में काम करता है लेकिन [पूर्ण-पृष्ठ दृश्य] में विफल रहता है (http://jsbin.com/ ugosup/1)। –

एक टेक्स्ट एरिया को शेष पृष्ठ को लंबवत भरें?

उत्तर

संबंधित मुद्दे