Höhe und Breite eines DIV einstellen

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Moin,

mal 'ne (vielleicht) dumme Anfängerfrage:
ich versuche die Höhe und Breite eines DIV-Elements prozentual einstellen, da das Element später in einem dynamischen Panel in meiner Application dargestellt werden soll.

<div> id="map_canvas" style="height:100% width:100%"> </div>

Spannenderweise ist die Höhe immer ‘0’ …

Wenn ich bei der Höhe einen Wert in Pixel angebe, funktioniert es! Das Ganze wird im gesetzt!

Was mache ich falsch?

Danke und Gruß
Klaus

2

Naja, wenn du das wirklich so dar stehen hast, wundert es mich nicht. Du schließt den DIV-Tag direkt wieder und die Attribute werden somit nicht zugewiesen. Außerdem hast du ;'s bei deiner CSS-Anweisung vergessen. Versuchs vllt mal damit:

<div id="map_canvas" style="height: 100%; width: 100%;"> </div>
3

Moin,

ok, das stimmt, klappt aber trotzdem nicht.

Hier mal der gesamte Code:
[SPOILER]


<!DOCTYPE html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
    <meta charset="utf-8">
  </head>

  <body onload="initialize()">

    <div id="map_canvas" style="height: 100%; width: 100%;"> </div>

    <script type="text/javascript">
      function initialize()
      {
        var iterator = 0;
        var position = new google.maps.LatLng( 52.520816, 13.410186 );

        var neighborhoods = [
          new google.maps.LatLng( 52.511467, 13.437179 ),
          new google.maps.LatLng( 52.497622, 13.396110 ),
          new google.maps.LatLng( 52.517683, 13.394393 )
        ];

        var mapOptions =
        {
          center: position,
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map( document.getElementById("map_canvas"), mapOptions );
        google.maps.event.trigger( map, "resize" );
        <!--map.panTo( position );-->

        var lastMarker = new google.maps.Marker(
        {
          map: map,
          position: position,
          icon:
          {
            path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
            fillColor: "blue",
            scale: 7,
            strokeWeight: 1,
            strokeColor: "red",
            fillOpacity: 1.0
          },
          zIndex: 10,
          title: 'aktuelle Position',
          animation: google.maps.Animation.DROP
        } );
              
        function drop() 
        {
          for( var i = 0; i < neighborhoods.length; i++ )
          {
            setTimeout( function(){ addMarker(); }, i*200 );
          }
        }
        
        var markers = [];
        function addMarker() 
        {
          markers.push( new google.maps.Marker(
          {
            position: neighborhoods[iterator],
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP
          } ) );
          iterator++;
        }
        
        drop();
        
        var LineCoordinates = [
          position,
          new google.maps.LatLng( 52.511467, 13.437179 ),
          new google.maps.LatLng( 52.497622, 13.396110 ),
          new google.maps.LatLng( 52.517683, 13.394393 )
        ];

        var LinienZug = new google.maps.Polyline(
        {
          path: LineCoordinates,
          strokeColor: "red",
          strokeWeight: 2,
          strokeOpacity: 1.0
        } );

        LinienZug.setMap( map );
     }
     
     </script>
  </body>
</html>

[/SPOILER]

Füge ich evt. den canvas falsch ein ??
Gruß
Klaus

EDIT:
ah, habe im Web noch einige Hinweise gefunden:
so klappt es :


    <div id="map_canvas"> </div>

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

freu :lol:

4

[quote=vfl_freak;102832]ah, habe im Web noch einige Hinweise gefunden:
so klappt es :[/quote]

Ok, habe dann das Thema mal als gelöst markiert :wink: