Pełne skalowanie wysokości rzutowania div tylko css no js ... Możliwe?

Question

Ok, próbuję uzyskać div na skali, a wysokość jest zawsze wysokość viewport. Mam zamiar połączyć się z moimi przykładami, ponieważ wymaga to wyjaśnienia.

www.madmediablitz.com/tv/precentdemo.html

Powyższy link jest najbliżej Doszedłem do rozwiązania i mam nadzieję, że ktoś tutaj znajdzie to proste do naprawienia. Chciałbym, aby telewizor zawsze był wysokością rzutni (do pewnego stopnia, min-wysokość: ~ 400px; max-wysokość: ~ 700px;). Kod, którego tam użyłem, jest oparty na http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

Ten jest co nie chcę się zdarzyć. JEŚLI zmienisz rozmiar okna, zobaczysz, że nie skaluje się proporcjonalnie.

Próbuję obu z nich od około 2 dni i nie udało mi się uruchomić go. Dosłownie modlę się o pomoc, jak myślę, to nie jest zbyt skomplikowane.

Answer 1

html, body { 
    height: 100%; 
} 

Przeczytaj artykuł this.

Answer 2

Można użyć pozycjonowanie bezwzględne w dość zaskakujący sposób przypuszczam:

div#element { 
    position: relative; 
} 

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

przeglądarka zgodna powinien starać się szanować zarówno górne i dolne dyrektyw, faktycznie zarządzający pełną wysokość.

Answer 3

proszę zobaczyć: 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; 
} 

to wszystko.