ट्विटर बूटस्ट्रैप: 100% ऊंचाई के साथ कंटेनर में div


129

ट्विटर बूटस्ट्रैप (2) का उपयोग करते हुए, मेरे पास एक नौसेना पट्टी के साथ एक सरल पृष्ठ है, और अंदर containerमैं 100% ऊंचाई (स्क्रीन के नीचे) के साथ एक div जोड़ना चाहता हूं। मेरा सीएसएस-फू कठोर है, और मैं इस काम नहीं कर सकता।

सरल HTML:

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

वर्तमान सीएसएस:

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • संपादित करें *

मैंने नीचे दिए गए सुझाव के अनुसार ऊँचाई वर्ग को जोड़ दिया है। लेकिन, समस्या यह है कि मैं शीर्ष पर स्थिर नावबार के लिए खाते में शरीर के लिए एक पैडिंग-टॉप जोड़ता हूं। यह "मैप" div की 100% ऊंचाई को प्रभावित करता है और इसका मतलब है कि एक स्क्रॉलबार जुड़ जाता है - जैसा कि यहां देखा गया है: http://jsfiddle.net/S3Gvf/2/ क्या कोई मुझे बता सकता है कि कैसे ठीक किया जाए?


1
तो आप बस उस दिवा को सभी दिशाओं में फैलाना चाहते हैं?
एंड्रेस इलिच

1
हां, मैं चाहता हूं कि यह नौसेना के विभाजन के बाद छोड़े गए स्थान को भरने के लिए
मैट रॉबर्ट्स

जवाबों:


129

कक्षा .fillको सेट करेंheight: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(मैं एक लाल रंग की पृष्ठभूमि रखता हूं #mapताकि आप देख सकें कि इसमें 100% की ऊँचाई है)


धन्यवाद, बाद में कोशिश करेंगे और वापस रिपोर्ट करेंगे। विश्वास नहीं कर सकता मुझे याद है कि साधारण तय :)
मैट रॉबर्ट्स

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

2
jsfiddle.net/S3Gvf/4box-sizing:border-box; एक आसान वर्कअराउंड के लिए पैडिंग (बॉडी टैग) वाले तत्व पर उपयोग करें
Horen

1
मुझे यकीन नहीं है कि कैसे css3 वूडू काम करता है, लेकिन यह काम करता है :) बहुत बहुत धन्यवाद!
मैट रॉबर्ट्स

1
इस उदाहरण में नवाब के पीछे #मैप वास्तव में अस्पष्ट है।
ईथर E

37

अपडेट 2019

में बूटस्ट्रैप 4 , flexbox एक पाने के लिए इस्तेमाल किया जा सकता पूर्ण ऊंचाई लेआउट कि शेष अंतरिक्ष भरता है।

सबसे पहले, कंटेनर (माता-पिता) को पूर्ण ऊंचाई की आवश्यकता है:

विकल्प 1_ के लिए एक वर्ग जोड़ें min-height: 100%;। याद रखें कि न्यूनतम ऊंचाई केवल तभी काम करेगी जब माता-पिता के पास एक ऊँचाई हो:

html, body {
  height: 100%;
}

.min-100 {
    min-height: 100%;
}

https://www.codeply.com/go/dTaVyMah1U

विकल्प 2_ vhइकाइयों का उपयोग करें :

.vh-100 {
    min-height: 100vh;
}

https://www.codeply.com/go/kMahVdZyGj

फिर, d-flex flex-columnकंटेनर पर फ्लेक्सबॉक्स दिशा कॉलम का उपयोग करें , और flex-grow-1किसी भी बच्चे divs (यानी :) पर rowजो आप शेष ऊंचाई को भरना चाहते हैं।

इसे भी देखें:
बूटस्ट्रैप 4 नेवबर और कंटेंट हाईलाइट फ्लेक्सबॉक्स को
भरें बूटस्ट्रैप - हेडर और फुटर के बीच फ्लूड कंटेनर भरें
पंक्ति को स्ट्रेच शेष ऊंचाई कैसे बनाएं


ऐसा क्यों लगता है कि ये दोनों दृष्टिकोण बस एक दूसरा कंटेनर बनाने के लिए काउंटर-सहज ज्ञान युक्त हैं जो खिड़की की शेष ऊंचाई तक ले जाता है? डेवलपर को ऊपर दी गई जगह में बूटस्ट्रैप के साथ जो कुछ भी करना है उसके लिए लचीलापन होना चाहिए।
क्लेविस

क्या तुम सच में लगता है कि यह एक हकदार है? "बस एक दूसरा कंटेनर बना रहा है जो खिड़की की शेष ऊंचाई तक ले जाता है" .. क्या आपके पास इसका एक उदाहरण है कि यह कैसे काम करेगा? पूरे बिंदु height:100%केवल नीचे की बाकी ऊंचाई का उपभोग नहीं करता है, बल्कि एक ऊर्ध्वाधर स्क्रॉलबार बनाने के लिए व्यूपोर्ट ऊंचाई का 100% खपत करता है। इसलिए मानचित्र को स्वीकृत उत्तर में नीचे की ओर स्कोलिंग की आवश्यकता होती है।
ज़िम

आप बूटस्ट्रैप के लिए इन रूपों पर एक अच्छी तरह से सम्मानित डेवलपर हैं। मैंने आपको नहीं छोड़ा, किसी और ने किया। मैं आपके उत्तर से हैरान हूं क्योंकि आपके अधिकांश उत्तर अत्यधिक मतदान वाले हैं। काश मेरे पास इसका एक उदाहरण होता कि वह कैसे काम करता। मुझे अभी तक कुछ भी नहीं मिला है, लेकिन यह अच्छा होगा यदि फ्लेक्सबॉक्स में पेज के नीचे की ओर एक तत्व के बाकी हिस्सों को भरने का एक आसान तरीका है। एक उत्तर देने की कोशिश करने के लिए धन्यवाद, मुझे लगता है कि हम इसे आसानी से लागू करने में थे। मुझे लगता है :) नहीं
klewis

1
ठीक है, जैसा कि उत्तर में कहा गया है "कंटेनर पर फ्लेक्सबॉक्स दिशा स्तंभ डी-फ्लेक्स फ्लेक्स-कॉलम का उपयोग करें, और फ्लेक्स-ग्रो -1 जो ​​किसी भी बच्चे के डिवो (यानी: पंक्ति) पर है जिसे आप शेष ऊंचाई को भरना चाहते हैं" ... माता-पिता को समझाया गया 100% ऊंचाई है
Zim


1

आपको "भरने" तत्व में पैडिंग-टॉप को जोड़ने की आवश्यकता है, साथ ही बॉक्स-साइज़िंग जोड़ें: बॉर्डर-बॉक्स - यहाँ नमूना बूटवैल

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.