सीएसएस, लंबवत div को खींचकर जब तक यह अपने माता-पिता की ऊंचाई तक पहुंच नहीं जाता

Question

pageWrapper कंटेनर में लपेटा गया, मेरे पास कॉलम में 3 divs हैं। पहला (हेडर) और अंतिम (navWrapper) ने ऊंचाई तय की है। मुझे पैरेंट div पृष्ठ तक अधिकतम ऊंचाई तक पहुंचने के लिए मध्यम (contentWrapper) की आवश्यकता होती है जब ब्राउज़र ब्राउज़र के व्यूपोर्ट के अनुसार अधिकतम ऊंचाई तक पहुंच जाता है ()।

मैं इस समस्या के स्कीमा खींचता हूं।

यहां मेरे वर्तमान समाधान का फ़िल्ड है। http://jsfiddle.net/xp6tG/

और यहाँ कोड

सीएसएस और एचटीएमएल

html, body{ 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    background-color: #E3E3E3; 
 
} 
 

 
#pageWrapper{ 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 600px; 
 
    height: 100%; 
 
} 
 

 
header{ 
 
    display:block; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
#contentWrapper{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
#navWrapper{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background: green; 
 
}

<div id="pageWrapper"> 
 
    <header> 
 
    Header 
 
    </header> 
 
    <div id="contentWrapper"> 
 
    Content 
 
    </div> 
 
    <div id="navWrapper"> 
 
    Nav 
 
    </div> 
 
</div>

यह लगभग काम कर रहा है, लेकिन यह बहुत अधिक ऊंचाई में परिणाम है, जिसकी वजह से है कि एक ऊर्ध्वाधर स्क्रॉलबार प्रकट होता है।

Answer 1

यहां ऐसा करने का एक तरीका है।

निम्नलिखित सीएसएस लागू करें:

html, body{ height: 100%; margin: 0;} 
body{ background-color: #e3e3e3;} 

#pagewrapper{ 
    margin: 0 auto; 
    position: relative; 
    width: 600px; 
    height: 100%; 
} 
header{ 
    display:block; 
    width: 100%; 
    height: 100px; 
    background: yellow; 
} 
#contentwrapper{ 
    width: 100%; 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    left: 0; 
    background: blue; 
} 
#navwrapper{ 
    width: 100%; 
    position: absolute; 
    height: 100px; 
    bottom: 0px; 
    left: 0; 
    background: green; 
} 

जब से तुम header और #navwrapper ब्लॉक तत्वों के लिए ऊंचाइयों निर्दिष्ट, आप माता-पिता #pagewrapper ब्लॉक के संबंध में पूर्ण स्थिति का उपयोग नीचे और ऊपर स्थापित करने के लिए कर सकते हैं #contentwrapper के लिए ऑफ़सेट और #navwrapper के लिए नीचे ऑफसेट।

यदि आपको स्क्रॉल बार दिखाई देता है, तो आपको html और/या body टैग के लिए margin: 0 सेट करने की आवश्यकता हो सकती है।

डेमो बेला: http://jsfiddle.net/audetwebdesign/yUs6r/

Answer 2

आप अपने अनुभाग में इस स्क्रिप्ट डाल अपने सीएसएस कहा जाता है के बाद की कोशिश कर सकते हैं। यह आपके सिर/पैर तत्वों की ऊंचाई पाएगा और केंद्र div में ऊंचाई को स्क्रीन भर देगा। यह अच्छा है क्योंकि यदि आप अपने हेडर/पाद लेख तत्वों को गतिशील बनाने का निर्णय लेते हैं तो यह स्क्रिप्ट अभी भी काम करेगी।

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     var totalHeight = $('#pageWrapper').height(); 
     totalHeight -= $('header').height(); 
     totalHeight -= $('#navWrapper').height(); 

     // Remove an extra 20px for good measure 
     totalHeight -= 10; 

     $('#contentWrapper').css('height', 'auto'); 
     $('#contentWrapper').css('min-height', totalHeight); 
}); 
</script>