Volle Ansichtsfensterhöhenskalierung div nur css no js ... Möglich?

Question

Ok, ich versuche, ein Div zu skalieren und die Höhe ist immer die Höhe des Ansichtsfensters. Ich werde zu meinen Beispielen verlinken, da es einige Erklärungen benötigt.

www.madmediablitz.com/tv/precentdemo.html

Der Link oben ist die nächste, die ich zu einer Lösung gekommen sind, und ich hoffe, dass hier jemand es einfach zu beheben finden. Was ich möchte, ist der Fernseher immer die Höhe des Ansichtsfensters (bis zu einem Grad, Min-Höhe: ~ 400px; Max-Höhe: ~ 700px;). Der Code, den ich dort verwendet habe, basiert auf http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

Dieses ist, was ich will nicht passieren. Wenn Sie die Größe Ihres Fensters ändern, sehen Sie, dass es nicht proportional skaliert.

Ich habe beide für etwa 2 Tage jetzt versucht, und ich habe es nicht zur Arbeit bekommen. Ich bete buchstäblich um Hilfe, wie ich denke, das ist nicht zu kompliziert.

Answer 1

html, body { 
    height: 100%; 
} 

this Artikel lesen.

Answer 2

können Sie verwenden die absolute Positionierung in einer ziemlich überraschend, wie ich mutmaßen:

div#element { 
    position: relative; 
} 

img.vertical { 
    position: absolute; 
    top: 0; // no need for px or em 
    bottom: 0; 
} 

A konformen Browser sowohl die oberen und unteren Richtlinien zu respektieren versuchen sollten, tatsächlich eine volle Höhe zu verwalten.

Answer 3

Bitte sehen: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

<div id="welcome"> 
    your content on screen 1 
</div> 

<div id="projects"> 
    your content on screen 2 
</div> 
div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
} 

Das ist es.