Próba dopasowania treści html (googlemap) między nagłówkiem a stopką - CSS - HTML

Próbuję dopasować mapę googlemap między nagłówkiem a stopką, jako główną treść, ale mapa uzyskuje 100% i przesuwa stopka w dół, chcę dopasować mapę między nimi tak, że jeśli zmienię rozmiar okna, cała zawartość dostosuje się automatycznie bez pojawienia się lewego paska, aby przewinąć zawartość, ale czegoś, czego mi brakuje, czy ktoś mógłby mi pomóc?Próba dopasowania treści html (googlemap) między nagłówkiem a stopką - 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>

Pozdrawiamy i dziękujemy z góry.
Edytowane: tutaj link jsfiddle, z niewielkimi zmianami, ale z tym samym problemem, jeśli próbujesz uzyskać: nagłówek, mapa i stopka w jednym widoku, w rzeczywistości nie możesz, pojawia się pasek przewijania, ponieważ mapa przesuwa się w dół stopki: http://jsfiddle.net/PYaDq/197/

Źródło

2013-04-19 Goku

walczyłem z kwestii, takich jak to, myślę, że kluczem jest pozycjonowanie bezwzględne i myślę, że to jest to, co starasz się dostać:

<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>

Można go przetestować tutaj: http://jsfiddle.net/cespinoza/s6Q4V/

Źródło

2013-04-20 02:05:13 chespinoza

Dzięki temu działa tak, jak chciałem ... – Goku

Gorąco polecam zajrzenie do zapytań o media css3 jako opcji. ogólne wyszukiwanie zwiększy wiele dobrych zasobów.

Zapytania o media są przeznaczone do zmieniania szerokości urządzeń (i przeglądarek) i mają format podobny do innych znaczników stylu. możesz mieć coś takiego:

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

spowoduje to zastąpienie ustawień stylu na określonych granicach.

mam nadzieję, że to pomoże.

Źródło

2013-04-19 19:49:19

Dzięki, ale mój kod bez zmiany rozmiaru miał problemy z renderowaniem projektu – Goku

@henry_bemis Jak już powiedziałem, mapa popycha stopkę w dół, nie wiem jak to naprawić – Goku

Próba dopasowania treści html (googlemap) między nagłówkiem a stopką - CSS - HTML

Odpowiedz

Powiązane problemy