Höhe und Breite eines DIV einstellen

vfl_freak · 2. Oktober 2014

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.

Javascript:

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

Spannenderweise ist die Höhe immer '0' ...

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

Was mache ich falsch?

Danke und Gruß
Klaus

SpiceLab · 2. Oktober 2014

Schau mal hier: https://www.tutorials.de/threads/cs...-das-gesamte-browserfenster-gestreckt.248175/

vfl_freak · 2. Oktober 2014

nein, leider nicht .... die Höhe bleibt hartnäckig auf o :-(

SpiceLab · 2. Oktober 2014

In deinem gezeigten Code sind zudem zwei syntaktische Fehler enthalten

So dürfte die Höhe nun 100% betragen:

HTML:

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

Man beachte/vergleiche hier auch das unterschiedliche Syntax-Highlighting

vfl_freak · 2. Oktober 2014

na ja, klappt auch nicht :-(
Die Version hatte ganz unbedarft schon zu Beginn versucht!

Ich habe gerade noch was im Internet gefunden, was zwar auch nicht funktioniert:

Javascript:

<style>
        html, body,
        #map_canvas
        {
          width: 100%;
          height: auto !important;
            height: 100%;
        
            margin: 0px;
            padding: 0px
        }
      </style>

Wenn ich hier aber das PADDING auf bspw. 50 px setze, sehe ich den unteren Rand der darzustellenden Map ganz oben im Editor ....

Hier mal das gesamte HTML-Dokument in der aktuellen Version:

HTML:

<!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>
      <div id="map_canvas" style="height:100%; width:100%"> </div>
    </div>

     <style>
        html, body,
        #map_canvas
        {
          width: 100%;
          height: auto !important;
            height: 100%;
        
            margin: 0px;
            padding: 50px
        }
      </style>

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

Füge ich vielleicht das canvas falsch hinzu ??

Danke und Gruß
Klaus

SpiceLab · 2. Oktober 2014

#map_canvas befindet sich in einem weiteren <div>-Element, was das CSS beeinflusst.

Hiermit verhält sich #map_canvas wie gewünscht:

CSS:

html,body,div
{
  height:100%;
  margin:0;
  padding:0
}

... was den HTML-Code auch dezimieren lässt:

HTML:

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

width:100% gilt bei Block-Elementen per Voreinstellung

vfl_freak · 2. Oktober 2014

Ja, das öffnende Tag war beim Kopieren verloren gegangen ... irgendwie scheine ich zu doof für JS zu sein .... :-(

HTML:

<!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>
      <div id="map_canvas"> </div>
    </div>

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

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

Als Ergebnis sehe ich im Editor nur die Zeile

"html, body, div { height:100%; margin: 0; padding: 0 }"

aber in FireBug:

<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">

Gruß
Klaus

SpiceLab · 2. Oktober 2014

vfl_freak hat gesagt.:
Ja, das öffnende Tag war beim Kopieren verloren gegangen ... irgendwie scheine ich zu doof für JS zu sein .... :-(

Wir reden hier die ganze Zeit über CSS, nicht JS

Und erneut sorgt ein Syntax-Fehler für Verdruss

Aus

HTML:

<style="text/css">

wird

HTML:

<style type="text/css">

vfl_freak · 2. Oktober 2014

ich hasse diese Scriptsprachen ....

Aber - mit:

CSS:

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

klappt es jetzt endlich *freu*

Ich danke Dir für Mühe und Geduld !!
Gruß
Klaus

ksk · 2. Oktober 2014

Du kannst die Größe auch in JavaScript/jQuery Dynamisch setzen.

Nicht getestet

Code:

// Javascript
var div = document.getelemendById("map_canvas");
div.setattribute("width", "300px");

// jQuery
$("div#map_canvas").width("300px");
// oder
$("div#map_canvas").attr("width", "300px");
// oder animiert
$("div#map_canvas").animate({ width: "300px"}, 500);

Lg
ksk

Höhe und Breite eines DIV einstellen

vfl_freak

SpiceLab

ZENmechanic

vfl_freak

SpiceLab

ZENmechanic

vfl_freak

SpiceLab

ZENmechanic

vfl_freak

SpiceLab

ZENmechanic

vfl_freak

ksk

Erfahrenes Mitglied

Neue Beiträge