bootstrap высота героя - Листовка

Question

У меня есть базовый макет начальной загрузки с навигационной панелью и боковой панелью (span 3) + map (span 9). Моя проблема в том, что, когда я смотрю этот код в браузере, карта выглядит примерно так: http://dl.dropbox.com/u/15923835/bootstr.jpg

Но я хочу фиксированный размер для карты (он должен охватывать 80% страницы. Я попытался установить . фиксированная высота в каждом DIV, но ничего не происходит ли у вас какие-либо предложения

Извините за мой плохой техническое описание (я пытаюсь узнать)

вот копия кода:

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span3"> 
     <div class="well sidebar-nav"> 
     <ul class="nav nav-list"> 
      <li class="nav-header">Sidebar</li> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="nav-header">Sidebar</li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="nav-header">Sidebar</li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </div><!--/.well --> 
    </div><!--/span--> 
    <div class="span9"> 

     <div class="hero-unit" id="map"></div> 

      <script src="../leaflet/dist/leaflet.js"></script>   
      <script> 

       var map = new L.Map('map'); 

       var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', 

        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', 

        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); 

       map.setView(new L.LatLng(55.367, 10.811), 6).addLayer(cloudmade); 

     var trailers = new L.LayerGroup(); 

     <?php $query = mysql_query("SELECT tblmain.modemid, max(dateepoch), tblmain.date, tblmain.speed, tblmain.la, tblmain.lo, tblmain.t1, tblmain.t2, tblmain.spt1, tblmain.spt2, tbltrailers.name \n" 
      . "FROM tblmain\n" 
      . "LEFT JOIN tbltrailers\n" 
      . "on tblmain.modemid = tbltrailers.modemid\n" 
      . "GROUP BY modemid "); 
     $i = 1; 
     while ($row = mysql_fetch_array($query)){ 
     $modemid=$row['modemid']; 
     $trailernummer=$row['name']; 
     $date=$row['date']; 
     $lat=$row['la']; 
     $lon=$row['lo']; 
     $speed=$row['speed']; 
     $t1=$row['t1']; 
     $t2=$row['t2']; 
     $spt1=$row['spt1']; 
     $spt2=$row['spt2']; 
     echo ("var marker$i = new L.Marker(new L.LatLng($lat, $lon)); 
     marker$i.title = \"test\"; 
     marker$i.bindPopup(\"<h1>$trailernummer</h1><br/>Modemid: $modemid<br/>Datum: $date<br/>Temp 1: $t1<br/>Temp 2: $t2<br/>Setpoint 1: $spt1<br/>Setpoint 2: $spt2 <br/> \").openPopup(); 
     trailers.addLayer(marker$i); 
     "); 
     $i++; 
     } 
     ?> 
       map.addLayer(trailers); 


       //marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); 

      </script> 
     </div> 
    </div> 
</div> 

Answer 1

, как указано в быстром старте: http://leaflet.cloudmade.com/examples/quick-start.html использовать стиль на сНу # карте

<div id="map" style="height: 200px"></div>