1. घर
  2. सवाल और जवाब
  3. < form > ब्रेक ऊंचाई: 100%?

< form > ब्रेक ऊंचाई: 100%?

2012-02-14 15 views
5

पृष्ठों की सरल मेरी समस्या प्रदर्शित करने के लिए:< form > ब्रेक ऊंचाई: 100%?

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body 
      { 
       height: 100%; 
       overflow: hidden; 
      } 
      body 
      { 
       margin: 0; 
       padding: 0; 
      } 
      #container 
      { 
       background: red; 
       height: 100%; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"></div> 
    </body> 
</html>

div कंटेनर सही ढंग से लाल रंग के साथ ब्राउज़र विंडो भर जाता है। अब div को एक रूप में लपेटें:

<body> 
    <form> 
     <div id="container"></div> 
    </form> 
</body>

और div-container collapses। क्यूं कर? एक फॉर्म टैग के बारे में क्या है जो 'ऊंचाई के साथ निकटतम एन्सेस्टर' तोड़ता है?

स्रोत

2012-02-14 n8wrl

उत्तर

10

formblock तत्व है, ब्लॉक तत्वों की कोई ऊंचाई नहीं है जब तक कि उनकी सामग्री विस्तार न हो या उन्हें स्पष्ट रूप से ऊंचाई दी जाती है। #container का सबसे नज़दीकी पूर्वज form है, और इसकी ऊंचाई 0 है, इसलिए #container की ऊंचाई 0 है।

स्रोत

2012-02-14 15:50:37 zzzzBov

+2

मैं था नहीं विचार प्रपत्र ब्लॉक – n8wrl

+0

था पूरी तरह से स्पष्ट होना करने के लिए, [ 'फॉर्म' "प्रवाह है सामग्री "] (http://dev.w3.org/html5/spec/the-form-element.html#the-form-element), ब्राउज़र डिफ़ॉल्ट रूप से' प्रदर्शन: ब्लॉक' का उपयोग करेंगे। – zzzzBov

7

100% ऊंचाई स्पष्ट रूप से घोषित ऊंचाई वाले सभी पूर्वजों पर निर्भर करती है। FORM पर ऊंचाई जोड़ें और आपके उदाहरण को काम करना चाहिए।

HTML, BODY, FORM { 
    height: 100%; 
}

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

स्रोत

2012-02-14 15:47:14

1

कोशिश,

<style type="text/css"> 
     html, body, form 
     { 
      height: 100%; 
      overflow: hidden; 
     }

या

<div id="container">&nbsp;</div>

एचटीएमएल comportament identificate को

स्रोत

2012-02-14 15:52:13 Jones

संबंधित मुद्दे
नवीनतम प्रश्न

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