jak zrobić zmienna ulotka mapa Wysokość

Question

W mojej aplikacji robiłem div mapie jako

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

jednak, aby moje mapy reaguje Chcę, aby wysokość także 100%, jeśli robię height: 100% to nie jest pracujący.

W jaki sposób zwiększyć wysokość, tak jak szerokość, aby mapa była prawidłowo widoczna na dowolnym urządzeniu.

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

W przypadku zmiany wysokości & szerokość mapie wtedy nie dostaniesz mapę.

Answer 1

Trzeba ustawić elementy nadrzędne do height: 100%; pierwszy

html, body { 
    height: 100%; 
} 

Demo

Demo (To nie będzie działać jako rodzic nie wysokość jest określona)

Objaśnienie: Dlaczego trzeba aby to zrobić? Więc kiedy określasz wysokość elementu w %, pierwsze pytanie, które się pojawia, to: 100% czego? Domyślnie div ma wysokość 0px, więc 100% dla div po prostu nie zadziała, ale ustawienie elementów nadrzędnych height na 100%; będzie działać.

Answer 2

Musisz ustawić rozmiar div za pomocą JavaScript.

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

Pełny przykład można znaleźć pod adresem here.

Answer 3

Użyj height = "100vh" działa w nowszej przeglądarce. ale jest ok.