Bir üstbilgi ve altbilgi arasında bir html içeriği (googlemap) sığdırmaya çalışılıyor - CSS - HTML

Ana içerik olarak bir üstbilgi ve altbilgi arasında bir googlemap eşlemesi sığdırmaya çalışıyorum, ancak harita% 100'ü alır ve aşağı altbilgim, ben böylece tüm içerik otomatik olmadan ayarlamak içeriği kaydırmak için sol çubuğu belirecektir penceresini yeniden boyutlandırmak eğer aralarındaki haritayı sığdırmak istiyorum, ama eksik olan bir şey, biri onunla bana yardım eder misiniz lütfen?Bir üstbilgi ve altbilgi arasında bir html içeriği (googlemap) sığdırmaya çalışılıyor - CSS - HTML

<html> 
    <head> 
    <style type="text/css"> 
html, body, #map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#wrapper { 
    height: auto !important; 
    min-height: 100%; 
    height: 100%; 
    position: relative; /* Required to absolutely position the footer */ 
} 

#footer { 
    height: 20px; /* Define height of the footer */ 
    position: absolute; 
    bottom: 0; /* Sit it on the bottom */ 
    left: 0; 
    width: 100%; /* As wide as it's allowed */ 
} 

#content { 
    padding-bottom: 20px; /* This should match the height of the footer */ 
} 
    </style> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
     var map; 
     function initialize() { 
      var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), 
       mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
<body> 
    <div id="wrapper"> 
     <div id="header">Header added just for demonstration purposes</div> 
     <div id="content"><div id="map-canvas"></div></div> 
     <div id="footer">And this is my footer</div> 
    </div> 
</body> 
</html>

Selamlar ve şimdiden teşekkürler. Biraz değişikliklerle Burada jsfiddle linki ama, anlamaya çalışırsanız aynı konu ile:

Düzenlendi başlığını harita ve bir görünümde altbilgi aslında, çünkü kaydırma çubuğunu görünür olamaz i şiddetle bir seçenek olarak css3 medya sorguları içine bakarak öneriyoruz http://jsfiddle.net/PYaDq/197/

kaynak

2013-04-19 Goku

böyle konularla savaşıyordu

olduğunu ve bu almak için çalışıyoruz ne düşünüyorum:

<html> 
    <head> 
    <style type="text/css"> 
     html, body, #map-canvas { 
      height: 100%; 
      } 
     body { 
      margin: 0px; 
      padding: 0px; 
      border: 0; 
      outline: 0; 
      } 
     #header { 
      top: 0; 
      right: 0; 
      left: 0; 
      position: absolute; 
      } 
     #wrapper { 
      left: 0px; 
      top: 40px; 
      bottom: 18px; 
      right: 0; 
      position: absolute; 
     } 

     #footer { 
      bottom: 0; 
      right: 0; 
      left: 0; 
      position: absolute; 
      width:100%; 
     } 

     #content { 
      top: 1px; 
      bottom: 0px; 
      /*padding-left: 10px;*/ 
      overflow: auto; 
      position: absolute; 
      left: 0; 
      right: 0; 
     } 

    </style> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
     var map; 
     function initialize() { 
      var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), 
       mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
<body> 
    <div id="header">Header added just for demonstration purposes</div> 
    <div id="wrapper"> 
     <div id="content"> 
      <div id="map-canvas"></div> 
     </div> 
    </div> 
     <div id="footer">And this is my footer</div> 

</body> 
</html>

Burada test edebilirsiniz: http://jsfiddle.net/cespinoza/s6Q4V/

kaynak

2013-04-20 02:05:13 chespinoza

Teşekkür düzeltmek bilmiyorum aşağı altbilgi iter söyledi gibi tasarım – Goku

: harita altbilgi aşağı bastırıyor. Bir genel arama iyi çok fazla kaynak kadar dönecek.

medya sorguları cihazı (ve tarayıcı) genişliklerini değiştirmek için tasarlanmıştır ve diğer stil etiketleri benzer bir formata sahiptir. Belirttiğiniz sınırları en stil ayarlarını geçersiz kılar

@media screen and (min-width: 400px) and (max-width: 700px) 
{ 
    #content 
    { 
    } 
}

bu: Eğer böyle bir şey olabilir.

Bunun yardımcı olacağını umuyorum.

galiba anahtar mutlak konumlama

kaynak

2013-04-19 19:49:19

teşekkürler ama boyutunu değiştirmek olmadan benim kod ben, harita, bunu zaman istediğim gibi çalıştığını – Goku

@henry_bemis işlemek için sorunlar vardı ... – Goku

Bir üstbilgi ve altbilgi arasında bir html içeriği (googlemap) sığdırmaya çalışılıyor - CSS - HTML

cevap

İlgili konular