सीएसएस 100% ऊंचाई + स्थिर ऊंचाई के साथ हेडर;

Question

मैं एक लेआउट बना रहा हूं जिसमें एक शीर्षलेख शामिल है, जो ऊंचाई में 40 पीएक्स है। इस हेडर के नीचे एक एसडब्ल्यूएफ रहता है जो शेष उपलब्ध स्थान लेना चाहिए।

अब तक का सबसे अच्छा समाधान एक टेबल के साथ काम कर रहा है, पहली पंक्ति 40px ऊंचाई और दूसरी पंक्ति 100% ऊंचाई प्रदान करता है - लेकिन ये पंक्तियां अभी भी इंटरनेट एक्सप्लोरर में जोड़ती हैं, जिसके परिणामस्वरूप 40 अतिरिक्त पिक्सेल के लिए एक स्क्रॉलबार दिखाई देता है - जो मामला नहीं होना चाहिए।

मैंने इसका उपयोग करने का प्रयास किया: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - यह ठीक काम करता है यदि आपके पास अंततः सामग्री है जो अंततः नीचे धक्का देती है लेकिन इसमें 100% के साथ एक एसडब्ल्यूएफ के साथ, यह पूरे पृष्ठ या आधे पृष्ठ पर ले जाएगा (एसडब्ल्यूएफ डालने के आधार पर सामग्री div या एसडब्ल्यूएफ सामग्री div होने के नाते)।

इससे पहले कि मैं जावास्क्रिप्ट का सहारा इस व्यवसाय किसी और एक बेहतर समाधान जानता है मैं सोच रहा हूँ की देखभाल के लिए?

Answer 1

अपने हेडर के रूप में स्थिर करके देखें। तो यह मुख्य शरीर पर तैरता है, और मुख्य शरीर को 100% ऊंचाई पर सेट करता है। फिर शरीर को शीर्ष पर 40px पैडिंग दें।

Answer 2

एक पृष्ठ के नीचे करने के लिए एक पाद लेख के लिए मजबूर करने के लिए ऐसा ही एक समाधान

html, body{height:100%;margin:0;padding:0;} 
    #head{height:40px;background:blue;} 
    #wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;} 
    #content{} 

<div id="wrapper"> 
<div id="head"> 
</div> 
<div id="content"> 
</div> 
</div>