làm thế nào để làm cho tờ rơi chiều cao bản đồ biến

Question

Trong ứng dụng của tôi, tôi đã làm div của bản đồ như

<div id="map" style="height: 610px; width:100%"></div> 

nhưng để làm cho bản đồ của tôi đáp ứng Tôi muốn làm cho chiều cao cũng 100%, nếu tôi làm height: 100% sau đó nó không phải là đang làm việc.

Làm cách nào để làm cho chiều cao cũng biến đổi như chiều rộng để bản đồ có thể được nhìn thấy chính xác trên mọi thiết bị.

Demo: http://jsfiddle.net/CcYp6/

Nếu bạn thay đổi chiều cao & chiều rộng của bản đồ sau đó bạn sẽ không nhận được bản đồ.

Answer 1

Bạn cần phải thiết lập các yếu tố phụ huynh để height: 100%; đầu tiên

html, body { 
    height: 100%; 
} 

Demo

Demo (Điều này sẽ không làm việc như không có chiều cao cha mẹ được định nghĩa)

Giải thích: Tại sao bạn cần Để làm việc đó? Vì vậy, khi bạn chỉ định chiều cao của một phần tử trong % thì câu hỏi thứ nhất phát sinh là: 100% của cái gì? Theo mặc định, div có chiều cao là 0px, vì vậy 100% cho div đơn giản sẽ không hoạt động, nhưng việc đặt các phần tử gốc height thành 100%; sẽ hoạt động.

Answer 2

Bạn phải đặt kích thước div bằng JavaScript.

$("#map").height($(window).height()).width($(window).width()); 
map.invalidateSize(); 

Bạn có thể tìm thấy ví dụ hoàn chỉnh here.

Answer 3

Sử dụng chiều cao = "100vh" hoạt động trong trình duyệt mới hơn. nhưng nó ổn.