Schlagwort: höhe

Breite und Höhe einer Windows 8-App ermitteln

Wie wir in [post id=4022]Windows 8 App View States kontrollieren[/post] gesehen haben, kann eine App in den Snap-View versetzt werden, wodurch ihr nur 320 Pixel Breite zustehen. Doch wie groß ist die App im Vollbildmodus? Das ist natürlich abhängig von der Auflösung des Bildschirms. Mit JavaScript lässt sich die Höhe und Breite einer App ganz leicht ermitteln:

var appWidth = document.documentElement.clientWidth;
var appHeight = document.documentElement.clientHeight;

Während meiner Versuche lieferte appWidth den Wert „1920“ im Vollbildmodus und „320“ im Snap-View (getested mit einem Full HD-Monitor). Interessanterweise erhält man dieselben Werte auch mit folgenden Funktionen:

var appWidth = window.innerWidth;
var appHeight = window.innerHeight;

DIV-Container mit 100 Prozent Höhe

Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:

HTML

1
2
3

<body>  
  <div id="wrapper"></div>
</body>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

html, body 
{
  height: 100%;
}
 
div#wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color: seagreen;
  width: 300px;
}