Phonegap -Leaflat map заполнить оставшийся сайт

Я использую Leaflat для отображения карты, я хочу, чтобы она заполнила оставшееся пространство, для чего я хотел использовать гибкие окна, но карта даже не отображается, это только вытеснять, если я определяю его высоту в px.Phonegap -Leaflat map заполнить оставшийся сайт

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13); 

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', { 
     maxZoom: 18, 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
     'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
     id: 'examples.map-i875mjb7' 
    }).addTo(map);

CSS

body { 
     padding: 0 !important; 
     margin: 0 !important; 
     height: 100% !important; 
     display: flex !important; 
     flex-flow: column wrap !important; 
     height: 100% !important; 
    } 
    #content { 
     width: 100%; 
     height: 100%; 
    } 

    .content-box {} .content-box .run {} 

    .content-box .run.data { 
     order: 1; 
     flex: 0 1 auto; 
    } 
    .content-box .run.data > h1 { 
     text-align: center; 
    } 
    .content-box .run.map { 
     order: 2; 
     flex: 1 1 auto; 
     width: 100%; 
    }

HTML

<!DOCTYPE html> 
    <html> 

    <head> 
     <meta charset="utf-8" /> 
     <title>App</title> 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
     <link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> 
    </head> 

    <body> 
     <div id="app"> 
     <div id="content" class="content-box"> 
      <div class="run data"> 
      <p>Some content</p> 
      <p>....</p> 
      </div> 
      <div class="run map" id="map"> 
      </div> 
     </div> 
     </div> 
    </body> 
</html>

я пытался несколько вещей, которые сюда m похожие вопросы здесь, в stackoverflow, но ни один из них не смог решить мою проблему. Если я добавлю position: fixed; в #content в свой файл css и добавлю height: 100%; в .content-box .run-map. Я правильно настроил карту в первый момент, но затем, щелкнув по ошибке, глюки и перестали правильно, я попробовал что-то с position: fixed;, но это не помогло. Как я могу сделать карту заполнять остальную часть моего сайта?

источник

2015-03-31 Con

То, что я сделал, это установить высоту html на 100%.

html { 
    height: 100%; 
}

источник

2015-04-01 18:56:30 asir6

К сожалению, это не работает для меня. Возможно, вы могли бы показать мне весь ваш код, я бы очень признателен. :-) – Con

Phonegap -Leaflat map заполнить оставшийся сайт

ответ

Смежные вопросы