Entwickler-Ecke

Programmiersprachen (Client) - [JS] margin vom body herausfinden


Heiko - Fr 18.09.09 00:06
Titel: [JS] margin vom body herausfinden
Hallo ihr,

ich möchte ein div auf 100% Höhe des Browsers bringen. Bekanntlichermaßen ist das bei Browsern momentan noch nicht problemlos möglich. Aus diesem Grund mache ich das per JS. Dabei stehe ich jetzt vor folgendem Problem:

im Body befindet sich ein Div das rot eingefärbt ist. Man sieht jetzt das die Browser rundherum einen weißen Abstand lassen, den man per body einfärben kann. FireBug zeigt mir an das der Body margin-Werte von 8px hat, Jedoch ist das feld body.style.marginTop etc. leer. Woher bekomme ich die 8px? Denn man kann die ja per CSS beeinflussen, von daher kann ich die 8 nicht hardcoden (was eh unsauber wäre).

besten Dank im Voraus
Heiko


matze - Fr 18.09.09 10:37
Wieso musst du die denn auslesen?
Wenn du die HTML Seite eh selber machst, dann setzte doch einfach per CSS diesen Wert auf 0.


Delete - Fr 18.09.09 10:59
Hi

ich definieren im CSS erstmal alle borders, margins und paddings so:

XML-Daten 
1:
2:
3:
4:
 
  <style><!--
    * {border: 0px; margin: 0px; padding: 0px;}
    #myDiv {height: 100%} /*dann so das div auf die hoehe bringen*/
  --></style>


im html dann so


XML-Daten 
1:
2:
3:
4:
5:
6:
 
...
<body>
  <div id="myDiv">
  </div>
</body>
...


Martok - Fr 18.09.09 14:39
Dann sollte das eigentlich gehen. So setze ich das bei einem Projekt auch um...

Meebo übrigens auch.


Heiko - Fr 18.09.09 14:46
Hallo ihr,

CSS bringt mir an der Stelle nichts, denn es handelt sich dabei um eine Art Framework. Und zwar soll es iFrames verwalten - und die iFrames sollen halt so hoch sein wie möglich, nur halt das kein Scrollbalken erscheint. Von daher will ich hier CSS weglassen damit es allgemeingültig ist (und somit müsste ich es in meiner Fomrel einfließen lassen) ;)

Heiko


Heiko - Fr 18.09.09 15:35
So mit Martok haben wir es jetzt herausbekommen :). Nur bei User-CSS könnte es ggf. Probleme geben, falls statt px % oder so angegeben wurde ;)


C#-Quelltext 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
 
getComputedStyle: function(obj, style)
{
  if (window.getComputedStyle) {
    return parseInt(window.getComputedStyle(obj, "")[style]);
  } else if (obj.currentStyle) {
    return parseInt(obj.currentStyle[style]);
  }
}

area.style.height = (document.documentElement.clientHeight - document.body.clientHeight - getComputedStyle(document.body, "marginTop") - getComputedStyle(document.body, "marginBottom") + area.clientHeight)+'px';


€: JS-Code IE tauglich gemacht


Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!