11

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

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

web-mapping leaflet bootstrap-framework

— njackson.gis
nguồn

3

vui lòng cung cấp thêm thông tin: đánh dấu của bạn trông như thế nào? Bạn có thể tạo ra một ví dụ tối thiểu cho thấy vấn đề?

— atlefren

12

Tôi luôn gặp vấn đề với chiều cao bản đồ trong bootstrap vì lề trên đỉnh có thể khác nhau khi chiều rộng của bản đồ thay đổi để có chiều cao 100% (nhưng với thanh điều hướng ở trên cùng) tôi kết thúc bằng cách sử dụng

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

}

đó là xấu xí nhưng có được công việc được thực hiện.

— Calvin
nguồn

6

[CẬP NHẬT 2020]

Kể từ 2020/02/23 Flexbox có hỗ trợ trình duyệt 95% và là một tùy chọn tuyệt vời để làm cho Leaflet phản ứng nhanh bằng cách sử dụng thuộc tính flex-grow.

Xem bản giới thiệu CodePen tại đây

Nó được thiết lập để nó vẫn hiển thị trên các trình duyệt không hỗ trợ Flexbox, chỉ những người dùng đó sẽ phải cuộn abit

¯ \ _ (ツ) _ /

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

[BÀI ĐĂNG]

Điều này làm việc cho tôi.

Lưu ý: Tôi muốn bản đồ của mình không rộng 100% trên màn hình lớn nên tôi đã thêm

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

— Chuyển tiếp Tristan
nguồn

1

đã làm cho tôi. thực sự là câu trả lời hay nhất

— g07kore

5

Vấn đề là #mapmột đứa trẻ bodyvà bạn chỉ có thể chỉ định chiều cao phần trăm cho các phần tử con nếu cha mẹ của nó có chiều cao được xác định rõ ràng.

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

Điều này sẽ tạo ra những gì bạn mong muốn, nhưng diện tích có thể sử dụng sẽ không bao giờ phát triển lớn hơn 75% của 480px. Thông thường, divsập khi không có nội dung, nhưng với Leaflet, mặc dù bản đồ của bạn nằm trong divđó nhưng nó không được tính toán khi kết xuất, do đó thu gọn khi kết xuất. Nếu bạn muốn nội dung chiếm toàn bộ không gian dọc, bạn có thể truy vấn kích thước cửa sổ khi tải trang bằng một số javascript và đặt chiều cao theo cách đó.

— Roma
nguồn

3

Chỉ cần thêm a height:100%vào htmlvà bodycác thẻ để chúng có chiều cao xác định và có thể được sử dụng làm tham chiếu và nó sẽ hoạt động.

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

Người giới thiệu:

Câu hỏi liên quan này của Stackoverflow: Phần trăm chiều cao HTML 5 / CSS
Bạn cũng có thể xem tiêu chuẩn W3C CSS 2.1 để xem mô hình hộp và phần về độ cao và lề của máy tính

— pconcepcion
nguồn

1

Đây là con đường để đi.

— George Silva

1

Cảnh báo! Sau khi kiểm tra trình duyệt chéo, tôi phát hiện ra rằng câu trả lời của tôi bên dưới chỉ hoạt động với tôi trong Chrome chứ không phải trong Firefox

Tôi đã có cùng một vấn đề và đã khắc phục vấn đề này với màn hình: bảng trên div chính và hiển thị ô bảng trên mỗi div nhờ câu trả lời này trên stackoverflow :

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

Và css:

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

— RvdBerg
nguồn

Bản đồ kích thước tờ rơi bên trong bootstrap

Người giới thiệu: