11

मैं बूटस्ट्रैप के अंदर अपने पत्रक के नक्शे की ऊंचाई को प्रतिशत में बदलने की कोशिश कर रहा हूं, लेकिन हर बार जब मैं करता हूं तो नक्शा नहीं खींचेगा। इस प्रकार, मुझे हमेशा px मान पर वापस लौटना होगा। मुझे पूरा यकीन है कि यह एक साधारण सेटिंग है जो मुझे याद आ रही है क्योंकि मैं एक सीएसएस नौसिखिया हूं। यहाँ मेरी सीएसएस है।

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>

web-mapping leaflet bootstrap-framework

— njackson.gis
स्रोत

3

कृपया अधिक जानकारी प्रदान करें: आपका मार्कअप कैसे दिखता है? क्या आप समस्या दिखाते हुए एक न्यूनतम उदाहरण प्रस्तुत कर सकते हैं?

— atlefren

12

मैंने हमेशा बूटस्ट्रैप में मानचित्र ऊंचाई के साथ समस्याएँ की हैं क्योंकि शीर्ष पर मार्जिन भिन्न हो सकता है जब मानचित्र की चौड़ाई 100% ऊँचाई प्राप्त करने के लिए बदलती है (लेकिन शीर्ष पर एक नौसेना पट्टी के साथ) मैं उपयोग करना समाप्त करता हूं

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

जो बदसूरत है, लेकिन काम हो जाता है।

— केल्विन
स्रोत

6

[२०२० अद्यतन]

2020/02/23 के रूप में फ्लेक्सबॉक्स में 95% ब्राउज़र का समर्थन है और यह फ्लेक्स-ग्रो संपत्ति का उपयोग करके कैटलॉग को उत्तरदायी बनाने के लिए एक बढ़िया विकल्प है।

यहाँ एक CodePen डेमो देखें

यह सेट-अप है, इसलिए यह अभी भी उन ब्राउज़र पर रेंडर करेगा जो फ्लेक्सबॉक्स का समर्थन नहीं करते हैं, बस उन उपयोगकर्ताओं को अबिट स्क्रॉल करना होगा

¯ \ _ (ツ) _ / ¯

================================================== ==========

[पुराने पोस्ट]

इसने मेरे लिए काम किया।

नोट: मैं चाहता था कि मेरा मानचित्र बड़ी स्क्रीन पर 100% चौड़ाई का न हो इसलिए मैंने जोड़ा

.container{max-width:60em;} /* Remove for full screen */

एचटीएमएल

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

सीएसएस

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

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

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

.container{
    max-width:60em;
    padding: 0.2em;
}

— ट्रिस्टन फॉरवर्ड
स्रोत

1

मेरे लिए काम किया। वास्तव में सबसे अच्छा जवाब

— g07kore

5

समस्या का #mapएक बच्चा है bodyऔर आप केवल बच्चे के तत्वों के लिए प्रतिशत ऊंचाइयों को निर्दिष्ट कर सकते हैं यदि यह माता-पिता की स्पष्ट रूप से परिभाषित ऊंचाई है।

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

यह आप की इच्छा क्या पैदा करेगा, लेकिन प्रयोग करने योग्य क्षेत्र बड़ा नहीं होगा तो 480px का 75%। आम तौर पर divजब कोई सामग्री नहीं होती है, तो ढह जाती है, लेकिन कैटलॉग के साथ, भले ही आपका नक्शा divइसमें हो, रेंडर की गणना नहीं की जाती है, इसलिए रेंडर पर गिर जाते हैं। यदि आप सामग्री को सभी ऊर्ध्वाधर स्थान पर ले जाना चाहते हैं, तो आप कुछ जावास्क्रिप्ट के साथ पृष्ठ लोड पर विंडो आकार को क्वेरी कर सकते हैं और ऊंचाई को इस तरह सेट कर सकते हैं।

— Romah
स्रोत

3

बस एक जोड़ने height:100%के लिए htmlऔर bodyइसलिए वे एक है टैग परिभाषित ऊंचाई और संदर्भ के रूप में इस्तेमाल किया जा सकता है और यह काम करना चाहिए।

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

संदर्भ:

Stackoverflow का यह संबंधित प्रश्न: प्रतिशत ऊंचाई HTML 5 / CSS
आप बॉक्स मॉडल और कंप्यूटिंग हाइट्स और मार्जिन के बारे में हिस्सा देखने के लिए W3C CSS 2.1 मानक को एक लुक दे सकते हैं

— pconcepcion
स्रोत

1

जाने का यह रास्ता है।

— जॉर्ज सिल्वा

1

चेतावनी! क्रॉस-ब्राउज़र-परीक्षण के बाद मुझे पता चला कि नीचे दिए गए मेरे उत्तर ने केवल मेरे लिए क्रोम में काम किया और फ़ायरफ़ॉक्स में नहीं

मेरे पास एक ही समस्या थी और इसे डिस्प्ले के साथ तय किया गया था: मेन डिव पर टेबल और स्टैकफ़्लो पर इस उत्तर के लिए प्रत्येक डिव पर टेबल-सेल प्रदर्शित करें :

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

और सीएसएस:

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

— RvdBerg
स्रोत

आकार देने के कैटलॉग बूटस्ट्रैप के अंदर मानचित्र

संदर्भ: