बूटस्ट्रैप चिपचिपा पाद लेख सामग्री को पूर्ण पृष्ठ ऊंचाई कैसे बनाएं?

Question

मैं सीएसएस का उपयोग कर एक वेबसाइट के लिए एक चिपचिपा पाद लेख बनाने के लिए बूस्ट्रैप नमूना का उपयोग कर रहा हूं, यह सब ठीक काम करता है पृष्ठ के निचले हिस्से में पेजर के आकार में रखता है क्योंकि पृष्ठ का आकार बदलता है। कई पृष्ठों पर मेरे पास ऐसी सामग्री है जिसे पाद लेख को छोड़कर व्यावहारिक रूप से पूर्ण पृष्ठ दिखाया जाना चाहिए। इसलिए पृष्ठ के सामग्री अनुभाग को 100% ऊंचाई पर सेट करने की आवश्यकता है, इसलिए इसकी सामग्री को पूर्ण ऊंचाई पर आकार दिया जा सकता है।

Here's a JSFiddle that demonstrates the problem.

हम हरी कंटेनर div पूरी ऊंचाई कैसे कर सकते हैं, तो यह शीर्ष पर पेज ऊपर और नीचे पाद लेख के शीर्ष को छू लेती है?

धन्यवाद!

<div id="wrap"> 
    <!-- Begin page content --> 
    <div class="container"> 
     <div class="page-header"> 
      <h1>Sticky footer</h1> 

     </div> 
     <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p> 
     <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p> 
    </div> 
    <div id="push"></div> 
</div> 
<div id="footer"> 
    <div class="container"></div> 
</div> 

---

#wrap .container { 
    background-color: lightgreen; 
} 
/* Sticky footer styles */ 
html, body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 
/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
} 
/* Set the fixed height of the footer here */ 
#push, #footer { 
    height: 60px; 
} 

#footer { 
    background-color: #f5f5f5; 
} 

Answer 1

मैं आपकी समस्या का समाधान है। मैंने इसे JSFiddle से कोडेपेन में ले जाया, क्योंकि मुझे कोडपेन बेहतर पसंद है। कोई अन्य कारण नहीं। http://cdpn.io/IJHxf

यह अनिवार्य रूप से मुझे जवाब मिला है, और वे इसे कभी भी बेहतर तरीके से समझा सकते हैं। http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

जब आप उस उत्तर को लागू करते हैं, तो मुझे क्या मिला height: auto !important; अपराधी है कि यह तुरंत काम क्यों नहीं करता है। इसे #Wrap आईडी में पूर्ण प्रभाव डालने के लिए इसे टिप्पणी करें। वास्तव में यह देखने के लिए कोड पेन में अतिरिक्त परिवर्तन हैं कि क्या हो रहा है। क्या तुम सच में अपने मूल प्रश्न काम करने की जरूरत है

#wrap .container { 
    background-color: lightgreen; 
    min-height: 100%; 
    height: auto; /* this line takes care of "more than enough content problem" */ 
} 


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


#wrap { 
    min-height: 100%; 
    /* height: auto !important; */ 
    height: 100%; 
    margin: 0 auto -60px; 
} 

असल में, आप क्या कर सकते हैं है, और अधिक भावना के बजाय पूरी पंक्ति height: auto !important; तुम बस !imporant दूर ले सकता है बाहर टिप्पणी की है होगा। उदाहरण के लिए

#wrap { 
    height: auto !important; 
    /* changed to */ 
    height: auto; 
} 

मैंने कुछ रंग बदल दिए ताकि यह वास्तव में क्या हो रहा था और अधिक स्पष्ट हो सके। आप कोडेन में देखेंगे। कोड पेन में बहुत अधिक टिप्पणियां देखने के लिए मैंने वास्तव में क्या किया है FYI।

इसके अलावा, मैंने पाया कि आपके चिपचिपा पाद लेख ने मार्जिन की वजह से मेरे पृष्ठ को स्क्रॉल बार दिया है। मेरे लिए, मैंने नीचे दिए गए कोड के साथ स्क्रॉल बार से छुटकारा पा लिया।

margin: 0 auto -60px; 
/* changed to */ 
margin: 0 auto -80px;