mit "calc()" die <div> Breite errechnen aus der Browserhöhe (gelöst)

nyami · 22. Januar 2015

Hallo zusammen,

für eine Präsentation mit impress.js möchte ich den Slide-Container immer auf die maximale (Browserhöhe - 10px) x ((Browserhöhe - 10px) x Faktor) skalieren.
Geht das mit CSS? Welche einfache Lösung gibt es sonst?

Wenn es nur mit jquery geht kann mir jemand bitte die komplette Lösung bitte nennen?
Da ich Anfänger bin helfen mir die Codefragmente im Netz nicht wirklich weiter. und CSS reicht mir schon von der Komplexität,
da muss es nicht auch noch jquery sein! Ich möchte doch nur eine Präsentation bauen, die sich bei der Skalierung so wie
LibreOffice Impress oder Powerpoint verhält!

Vielen Dank!

Beispielseite: http://www.ub.uni-bielefeld.de…mpress-js/vorlage/#/start
dort kann auch der ganze code runter geladen werden!

Nitamud · 22. Januar 2015

Suchst du sowas?

Ist reines Javascript, sollte aber ein leichtes für dich sein das mit jQuery oder Ähnlichem umzusetzen

JavaScript

var factor = 1; //Number eingeben
var avaibleHeight =  screen.availHeight;




document.getElementById('id').style.height = Math.round( avaibleHeight - 10)+'px';
document.getElementById('id').style.width = Math.round((avaibleHeight * factor)-10)+'px';

nyami · 22. Januar 2015

Danke, schaue ich mir an.

Ich glaube ich habe hier eine reine CSS Lösung!
Bitte schaut es Euch einmal an und gebt mir ein Feedback.
Mit der Maßeinheit "vh" errechnet!

Auszug der entsprechenden CSS-Datei:

Code

.step {
 position: relative;
 width: 161vh;
 padding: 40px;
 margin: 20px auto;




 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;




 font-family: 'PT Serif', georgia, serif;
 font-size: 48px;
 line-height: 1.5;
}




/*
 ... and we enhance the styles for impress.js.




 Basically we remove the margin and make inactive steps a little bit transparent.
*/
.impress-enabled .step {
 margin: 0;
 opacity: 0.3;




 -webkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 -o-transition: opacity 1s;
 transition: opacity 1s;
}




.impress-enabled .step.active { opacity: 1 }




/*
 These 'slide' step styles were heavily inspired by HTML5 Slides:
 http://html5slides.googlecode.com/svn/trunk/styles.css




 ;)




 They cover everything what you see on first three steps of the demo.
*/
.slide {
 display: block;




 width: 161vh;
 height: 99vh;
/* padding: 40px 60px;*/




 background-color: white;
 border: 1px solid rgba(0, 0, 0, .3);
 border-radius: 10px;
 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);




 color: rgb(102, 102, 102);
 text-shadow: 0 2px 2px rgba(0, 0, 0, .1);




 font-family: 'Open Sans', Arial, sans-serif;
 font-size: 30px;
 line-height: 36px;
 letter-spacing: -1px;
}

Alles anzeigen

Nitamud · 22. Januar 2015

Funktioniert natürlich auch wird aber noch nicht in allen Browsern umgesetzt:

Viewport Units

Ist aber falls du diese nicht supporten musst, JS natürlich vorzuziehen:)

Wobei das bei deinem Problem aber nicht anwendbar ist, da du die Höhe - 10px haben willst...

wolf · 22. Januar 2015

Zitat

Wobei das bei deinem Problem aber nicht anwendbar ist, da du die Höhe - 10px haben willst...

CSS

calc( 100vh - 10px)

Oder hab ich da was falsch verstanden?

Nitamud · 23. Januar 2015

Zitat von wolf

Oder hab ich da was falsch verstanden?

Das scheine ich falsch in Erinnerung gehabt zu haben
Würd aber trotz der weiten Verbreitung, noch ein Fallback einbauen -> http://osvaldas.info/imitating…ebar-in-responsive-layout

Basi · 23. Januar 2015

Ich sehe da kein Problem, alle aktuellen Browser unterstützen calc, Opera Mini nicht, Opera hat einen Marktanteil von 1,9% in Deutschland, Opera Mini einen Bruchteil davon.

nyami · 23. Januar 2015

Das mit den 10px war nur eine idee um nicht bis ganz an den Rand zu gehen.
Ich habe einfach 1vh weniger genommen und damit halt einen Rand von 1%.

mit "calc()" die <div> Breite errechnen aus der Browserhöhe (gelöst)

Jetzt mitmachen!

Teilen