के प्रतिशत के रूप में textarea की ऊंचाई मैं कहना चाहूंगा कि टेक्स्ट क्षेत्र की ऊंचाई व्यूपोर्ट की ऊंचाई का 50% बराबर है। मैं उसे कैसे कर सकता हूँ? एक साधारण height: 50% चाल नहीं करता है।सीएसएस: व्यूपोर्ट ऊंचाई
एक साधारण ऊंचाई: 50% चाल नहीं करता है।
नहीं, क्योंकि इसके माता-पिता की स्पष्ट ऊंचाई नहीं है। तो 50% क्या? अभिभावक कहते हैं 'ऑटो', जिसका मतलब है कि इसे बाल सामग्री की ऊंचाई पर आधार दें। जो माता-पिता की ऊंचाई पर निर्भर करता है। अरे! आदि
तो आपको अपने माता-पिता को प्रतिशत की ऊंचाई देना होगा। और माता-पिता के माता-पिता, रूट तक सभी तरह से। उदाहरण दस्तावेज़:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body, #mything, #mything textarea { height: 100%; }
</style>
</head><body>
<div id="mything">
<textarea rows="10" cols="40">x</textarea>
</div>
</body></html>
अन्य संभावना यदि आप सबकुछ पर ऊंचाई निर्धारित नहीं करना चाहते हैं तो पूर्ण स्थिति का उपयोग करना है। यह तत्व को बदलता है कि आयाम प्रत्यक्ष माता-पिता से निकटतम पूर्वजों पर डिफ़ॉल्ट 'स्थिर' के अलावा 'स्थिति' सेटिंग के साथ आधारित होते हैं। यदि पोजीशनिंग वाले पूर्वजों के तत्व नहीं हैं, तो आयाम "प्रारंभिक कंटेनिंग ब्लॉक" पर आधारित होते हैं, जो व्यूपोर्ट के समान आकार के होते हैं।
अंत में, पाठकों पर लागू अतिरिक्त पैडिंग और सीमा के कारण '100%' की छोटी समस्या बहुत बड़ी है। 95%, या
मुझे लगता है कि आपको ऐसा करने के लिए किसी भी तरीके से जावास्क्रिप्ट का उपयोग करने की आवश्यकता है। आकार बदलें ईवेंट को संभालें, और टेक्स्ट क्षेत्र को कई पिक्सल सेट करें।
यदि आप प्रदर्शन सेट करते हैं तो आप इसे कर सकते हैं: ब्लॉक। लेकिन एचटीएमएल 4.01 में सख्त आपको कोल्स और पंक्तियों को परिभाषित करना होगा, लेकिन मुझे लगता है कि आप उन्हें सीएसएस के साथ ओवरराइड कर सकते हैं।
जबकि मेरे पास इस परीक्षण का परीक्षण करने के लिए सभी ब्राउज़र नहीं हैं, ऐसा लगता है कि अधिकांश स्वीकार करते हैं कि ऊंचाई को निर्दिष्ट करना चाहिए।
मैंने इंटरनेट एक्सप्लोरर 7 और फ़ायरफ़ॉक्स 3.0 में इसका परीक्षण किया।
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
क्या ब्राउज़र (रों) आप के साथ मुद्दों कर गया:
आप निम्नलिखित कोड का उपयोग करें?
एचटीएमएल और सीएसएस ऊंचाई के साथ इस तरह की चीज करने में इतना अच्छा नहीं है। वे एक मुक्त बहने वाले पृष्ठ के माध्यम से लंबवत स्क्रॉल करने के बारे में निश्चित रूप से अधिक हैं। मुझे लगता है कि जावास्क्रिप्ट आपका सबसे पूरा समाधान होने की संभावना है, क्योंकि फ्रायगुय कहते हैं।
यह प्रश्न तब नहीं था जब इस सवाल से पूछा गया था, लेकिन सीएसएस वैल्यूज और यूनिट्स मॉड्यूल लेवल 3 में viewport-percentage lengths शामिल है। ऐसा लगता है कि not to be supported on mobile browsers except iOS है।
हटाने
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
यहाँ एक textarea जो CSS3 के vhviewport unit जो
ऊंचाई के 1% के बराबर है का उपयोग कर व्यूपोर्ट ऊंचाई की वास्तव में 50% लेता है का एक छोटा उदाहरण है की कोशिश करो प्रारंभिक युक्त ब्लॉक के।
तो अगर हम 50vh करने के लिए textarea की ऊंचाई सेट, यह body ऊंचाई के आधे भाग प्राप्त होगा:
html, body, textarea {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
textarea {
height: 50vh;
}<textarea></textarea>यह pretty good supported विभिन्न ब्राउज़रों द्वारा, के अलावा है ओपेरा मिनी और आईई में आंशिक समर्थन।
यह भी देखें [यह प्रश्न] (http://stackoverflow.com/q/7570438/113848)। – legoscia
आप व्यूपोर्ट इकाइयों (CSS3) को आजमा सकते हैं: http://www.w3.org/TR/css3-values/#viewport-relative-lengths –