Sizing Leaflet Map bên trong bootstrap

Question

Tôi đã cố gắng thay đổi chiều cao của bản đồ tờ rơi của tôi thành tỷ lệ phần trăm bên trong bootstrap nhưng mỗi lần tôi làm bản đồ sẽ không vẽ. Vì vậy, tôi luôn phải quay trở lại giá trị px. Tôi khá chắc chắn một thiết lập đơn giản của nó mà tôi đang thiếu kể từ khi tôi là một người mới CSS. Đây là css của tôi.

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

Answer 1

Hãy thử thêm một tài sản height để body hoặc chứa mẹ.

Answer 2

Ngoài việc đặt thuộc tính chiều cao của div bản đồ thành 100%, bạn có thể cần phải triển khai this để đảm bảo rằng bản đồ điền vào div có kích thước lại.

Answer 3

CCS

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

html, body 
{ 
    height: 100%; 
} 

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

html

<div class="container fill"> 
    <div id="map"> 

    </div> 
</div> 

Answer 4

body { 
    padding: 0; 
    margin: 0; 
} 
html, body, #map, .row-fluid{ 
    height: 100%; 
} 

#map { 
    width: 100%; 
} 

.height-css 
{ 
    height: 100%; 
} 

html của bạn sẽ

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span12 height-css"> 
     <div id="map"></div> 
    </div> 
    </div> 
</div> 

Answer 5

Với CSS từ dự án Bootleaf trên Github:

html,body, #map{ 
    height:100%; 
    width: 100%; 
overflow: hidden; 
} 
body { 
    padding-top: 50px;