css - 2 div with fixed and liquid height in absolute positioned div -

html

  & lt; div class = "InfoPanel" & gt; & Lt; div वर्ग = "हैडर" & gt; हैडर & lt; / div & gt; & Lt; div वर्ग = "सामग्री" & gt; स्टार्ट & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & LT; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी और lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी एंड lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & LT; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी और lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी एंड lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & lt; br / & gt; सी & LT; br / & gt; अंत & lt; br / & gt; & Lt; / div & gt; & Lt; / div & gt;  

सीएसएस

 । इन्फ़ापैनल {ऊंचाई: 100%; छिपा हुआ सैलाब; स्थिति: पूर्ण; शीर्ष: 0; बाएं: 0; चौड़ाई: 300px; } .Header {ऊंचाई: 30px; line-height: 30px; पृष्ठभूमि: # c1c1c1; }। सामंजस्य {अतिप्रवाह: ऑटो; ऊंचाई: 100%; पृष्ठभूमि: # F1F1F1; }  

निश्चित ऊंचाई वाला "हैडर" div "सामग्री" div को स्थानांतरित कर रहा है ताकि हम "END" स्ट्रिंग को न देखें। जेएस के बिना कोई समाधान?

1 समाधान हैडर और सामग्री दोनों को बनाने के लिए तरल ऊंचाई, उदाहरण के लिए 10% और 90% मेरे मामले में यह अनुपयुक्त है।

आप CSS3 के कैल फ़ंक्शन का उपयोग कर सकते हैं:

 । सामग्री {अतिप्रवाह: ऑटो; ऊंचाई: कैल्क (100% - 30px); पृष्ठभूमि: # F1F1F1; }  

पुराने ब्राउज़र समर्थन के लिए आपको इसमें भी शामिल करना चाहिए:

  / * फ़ायरफ़ॉक्स * / ऊंचाई: -मोझ-कैल्क (100% - 30px); / * वेबकिट * / ऊँचाई: -वेबकिट-कैल्क (100% - 30px); / * ओपेरा * / ऊँचाई: -ओ-कैल्क (100% - 30px);