11

Broşür haritamın yüksekliğini bootstrap içindeki bir yüzdeye değiştirmeye çalışıyorum, ancak her yaptığımda haritayı çizmeyeceğim. Bu nedenle, her zaman px değerine geri dönmeliyim. Eminim onun bir CSS acemi olduğum için eksik basit bir ayar. İşte benim css.

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

web-mapping leaflet bootstrap-framework

— njackson.gis
kaynak

3

lütfen daha fazla bilgi verin: işaretlemeniz nasıl görünüyor? Sorunu gösteren minimal bir örnek verebilir misiniz?

— atlefren

12

Her zaman önyüklemede harita yüksekliği ile ilgili sorunlar yaşadım çünkü haritanın genişliği% 100 yükseklik elde etmek için değiştiğinde (ancak üstte bir nav bar ile) farklı olabilir

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);
    }

}

ki bu çirkin ama işi bitiriyor.

— Kalvin
kaynak

6

[2020 GÜNCELLEME]

2020/02/23 itibariyle Flexbox, % 95 tarayıcı desteğine sahiptir ve flex-grow özelliğini kullanarak Leaflet'i duyarlı hale getirmek için mükemmel bir seçenektir.

Burada bir CodePen Demosu görüntüleyin

Flexbox'ı desteklemeyen tarayıcılarda hala görüntülenecek şekilde ayarlanmış, sadece bu kullanıcıların abit'i kaydırması gerekecek

¯ \ _ (ツ) _ / ¯

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

[ESKİ POST]

Bu benim için çalıştı.

Not: Haritamın büyük ekranlarda% 100 genişlik olmamasını istedim, bu yüzden ekledim

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

HTML

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

CSS

#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;
}

— Tristan Forvet
kaynak

1

benim için çalıştı. aslında en iyi cevap

— g07kore

5

Sorun, #mapbir alt bodyöğedir ve alt öğe için yalnızca üst öğesi açıkça tanımlanmış bir yüksekliğe sahipse yüzde yükseklik belirtebilirsiniz.

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

Bu, arzu ettiğiniz şeyi yaratacaktır, ancak kullanılabilir alan asla 480 pikselin% 75'inden daha büyük büyümeyecektir. Normalde diviçerik olmadığında daraltılır, ancak Leaflet ile haritanız içinde olmasına rağmen divrender işleminde hesaplanmaz, bu nedenle render işleminde daraltır. İçeriğin tüm dikey alanı almasını istiyorsanız, sayfa yüklemesinde pencere boyutunu bazı javascript ile sorgulayabilir ve yüksekliği bu şekilde ayarlayabilirsiniz.

— RomaH
kaynak

3

Tanımlanmış bir yüksekliğe sahip olmaları ve referans olarak kullanılabilmeleri height:100%için htmlve bodyetiketlerine a eklemeniz yeterlidir.

<!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>

Referanslar:

Stackoverflow ile ilgili bu soru: Yüzde Yüksekliği HTML 5 / CSS
Kutu modelini ve yükseklik ve kenar boşluklarının hesaplanmasıyla ilgili kısmı görmek için W3C CSS 2.1 standardına da bakabilirsiniz.

— pconcepcion
kaynak

1

bu yol.

— George Silva

1

Uyarı! Tarayıcılar arası testlerden sonra aşağıdaki cevabımın Firefox'ta değil, yalnızca Chrome'da benim için çalıştığını öğrendim

Ben aynı sorunu vardı ve display ile bu düzeltildi: tablo bir ana div ve display table hücre her div üzerinde stackoverflow bu cevap sayesinde :

<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 -->

Ve css:

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

— RvdBerg
kaynak

Bootstrap içindeki Broşürü Boyutlandırma

Referanslar: