kostenloser Webspace werbefrei: lima-city

JS: innerWidth-property berechnet Scrollbalken nicht mit ein

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   j*********r

   17:36, 24.7.2015

   Hallo!
   
   Ich habe bei einem tag/kleinen projekt">kleinen Projekt, das ich gerade erstelle ein Problem. Im Wesentlichen ist mein Ziel ein Kalender in Website-Form, der auf Handy und PC abzurufen ist. Mein Problem bezieht sich auf die PC-Version:
   
   Um die einzelnen Kästchen für die Tage an die Fenstergröße anzupassen, benutze ich JavaScript. Um die Breite eines Tages-divs zu berechnen, liest mein Script die Eigenschaft "window.innerWidth" aus, teilt durch 7 (7 Tage in einer Reihe) und zieht dann für padding/border nochmal 6px ab. Das funktioniert soweit auch:
   
   (Der Code steht in einer Schleife, die alle Tage durchläuft und d mit dem jeweiligen Element belegt)
   

   d.width = (((window.innerWidth/7)-6)).toString()+"px";

   
   
   Leider funktioniert das ganze nicht so wie es soll, da der Scrollbalken in Chrome/Firefox auch Platz benötigt, der aber nicht von innerWidth abgezogen wird.
   
   Wisst ihr eine elegante Lösung (also nicht einfach 20px für den Balken abziehen), die möglichst bei allen Browsern funktioniert?
   
   MFG
   Jonas

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. grashuepfer

   grashuepfer hat kostenlosen Webspace.

   14:15, 27.7.2015

   Du kannst mit CSS3 für die Breite calc() verwenden:
   

   width:calc(100% / 7 - 6px);

   
   Das heißt die Breite ist ein siebtel abzüglich der 6 Pixel für padding und border.
   Es wird auch von fast allen Browsern unterstützt: http://caniuse.com/#feat=calc
   
   
   Alternativ könntest du auch einfach

   box-sizing:border-box;

   benutzen und

   width:calc(100% / 7 );

   da so padding und border (nicht aber margin) mit einbezogen werden und es auch eigentlich von jedem Browser unterstützt wird http://caniuse.com/#feat=css3-boxsizing.
4. Autor dieses Themas

   j*********r

   17:27, 27.7.2015

   Danke, danke danke!
   
   Ich war gerade schon am verzweifeln, während ich versuchte mit einem weiteren Div, dessen Größe dann ausgelesen wird versuchte, das Problem zu lösen. Dabei wurde natürlich mein ganzer CSS-Code versaut und nichts funktionierte mehr...
   
   Mit CSS3 hab ich nicht so viel Erfahrung, deshalb echt danke, dass du mir das gezeigt hast!
   
   mfg
   Jonas

5. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   17:40, 27.7.2015

   Falls du mit jQuery arbeitest, könntest du auch
   

   var x = $("body").innerWidth();
   var y = $("body").innerHeight();

   
   verwenden.
6. Autor dieses Themas

   j*********r

   22:58, 27.7.2015

   Ok, danke. Aber jetzt funktioniert es ja zum Glück schon

7. grashuepfer

   grashuepfer hat kostenlosen Webspace.

   15:38, 28.7.2015

   CSS3 kann nativ soviele Dinge, die früher nur mit Javascript realisierbar waren und ist dabei weit weniger fehleranfällig. Beispielsweise bei Änderung der Fenstergröße müsste man mit Javascript die Höhe und Breite jedes Objekts neu berechnen - CSS3 macht das automatisch und ist auch allgemein wesentlich einfacher zu handhaben.

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?