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

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

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

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


Spoiler: HTML-Dok.





```
<!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:

```
html,body,div
{
  height:100%;
  margin:0;
  padding:0
}
```
... was den HTML-Code auch dezimieren lässt:

```
<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 .... :-(


Spoiler: HTML-Dok





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

```
<style="text/css">
```
wird

```
<style type="text/css">
```


----------



## vfl_freak (2. Oktober 2014)

ich hasse diese Scriptsprachen .... 

Aber - mit:

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

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


----------



## SpiceLab (2. Oktober 2014)

vfl_freak hat gesagt.:


> ich hasse diese Scriptsprachen ....


CSS ist keine Scriptsprache, sondern eine Formatierungssprache 


vfl_freak hat gesagt.:


> Ich danke Dir für Mühe und Geduld !!


Kein Thema


----------



## vfl_freak (2. Oktober 2014)

Moin ksk,

hmm, jetzt Du einen JS/CSS-Anfänger wieder verwirrt 
Wieso ist es dynamisch, wennich feste Pixel-Werte setze ??

Gruß
Klaus


----------



## vfl_freak (2. Oktober 2014)

SpiceLab hat gesagt.:


> CSS ist keine Scriptsprache, sondern eine Formatierungssprache


ok, Überredet


----------



## ksk (2. Oktober 2014)

die feste Pixel-Werte kannst so auch setzen.
Du könntest ein Style für mehrere DIV-Objekte definiert (Bsp. gleicher Rahmen, Hintergrundfarbe, Schriftart usw.) jedoch könnten sich die größen von einandere unterscheiden.
In diesem Fall könntest die größe jenach DIV-Element entsprechend ändern.

CSS ist schon der richtiger weg jedoch erreicht es mit Dynamischen Inhalten bald die Grenzen.

Lg
ksk


----------



## vfl_freak (2. Oktober 2014)

Moin,



ksk hat gesagt.:


> CSS ist schon der richtiger weg jedoch erreicht es mit Dynamischen Inhalten bald die Grenzen.


das dürfte nicht so tragisch sein ...

Ich bin derzeit mit meiner Bastelei nur dran, mich überhaupt mal mit diesem Thema zu berschäftigen!
Auf Dauer soll eine Google-Map innerhalb einer Java-Application angezeigt werden, wobei die linke Hälfte der Applikation (die immer im Vollbild-Modus dargestellt wird) von den Größen her fix ist, während die rechte Hälfte, wo dann auch die Map angezeigt wird, sich entsprechend der Bildschirmgröße dynamisch dazu rechnet!
Klingt kompliziert, ist hierbei aber die Denkweise meines Chefs :-(

Danke und Gruß
Klaus


----------



## ksk (2. Oktober 2014)

Beachte das mit der Formatierung

```
<div id="map_canvas"> </div>
    <style type="text/css">
      html, body, div
        {
            height:100%;
            margin:0;
            padding:0
        }
    </style>
```
alle DIV-Elemente den gleichen CSS-Style bekommen.

Um nur einen bestimmten DIV einen Style zuzuweisen reicht es mittel ID zu definieren
Bsp:

```
#map_canvas { height:100%; margin:0; padding:0 }
```


Lg
ksk


----------



## vfl_freak (2. Oktober 2014)

Ja, Danke 
hatte ich auch gerade bemerkt und schon geändert !!

Gruß
Klaus


----------



## SpiceLab (2. Oktober 2014)

Der CSS-Selektor war von mir vorhin selbstverständlich allgemein gehalten, bezog sich auf diesen vorliegenden HTML-Code:

```
<div>
  <div id="map_canvas"> </div>
</div>
```
Um es zu spezifizieren, und übrige *<div>*-Elemente auszuschließen, könnte er bspw. so lauten:

```
<div id="canvas_wrap">
  <div id="map_canvas"> </div>
</div>
```
und das zugehörige CSS entsprechend dann so:

```
html, body, #canvas_wrap, #map_canvas { ... }
```


----------

