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 আপডেট]

2020/02/23 অবধি ফ্লেক্সবক্সের 95% ব্রাউজার সমর্থন রয়েছে এবং এটি লিফলেটটি উত্তরোত্তর সম্পত্তি ব্যবহার করে প্রতিক্রিয়াশীল করার জন্য একটি দুর্দান্ত বিকল্প।

এখানে একটি কোডপেন ডেমো দেখুন

এটি সেট আপ হয়েছে যাতে এটি এখনও ব্রাউজারগুলিতে রেন্ডার করে যা ফ্লেক্সবক্সকে সমর্থন করে না কেবল তাদের ব্যবহারকারীদের এবিট স্ক্রোল করতে হবে

¯ \: _ (ツ): _ / ¯

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

[পুরানো পোস্ট]

এটি আমার পক্ষে কাজ করেছে।

দ্রষ্টব্য: আমি চেয়েছিলাম যে আমার মানচিত্রটি বড় পর্দার 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>

তথ্যসূত্র:

স্ট্যাকওভারফ্লো সম্পর্কিত এই প্রশ্ন: শতাংশের উচ্চতা এইচটিএমএল 5 / সিএসএস
এছাড়াও আপনি একটি চেহারা দিতে পারেন 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
সূত্র

বুটস্ট্র্যাপের ভিতরে লিফলেট মানচিত্রটি আকার দিন

তথ্যসূত্র: