Полный масштаб масштабирования видового экрана div только css no js... Возможно?

Хорошо, я пытаюсь получить div для масштабирования, а высота всегда является высотой области просмотра. Я собираюсь ссылаться на мои примеры, поскольку это требует объяснения.

www.madmediablitz.com/tv/precentdemo.html

Ссылка, приведенная выше, ближе всего к решению, и я надеюсь, что кто-то здесь найдет ее простой в исправлении. Я хочу, чтобы телевидение всегда было высотой окна просмотра (в некоторой степени, min-height: ~ 400px; max-height: ~ 700px;). Код, который я использовал там, основан на http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

Это то, чего я НЕ хочу. Если вы измените размер своего окна, вы увидите, что он не масштабируется пропорционально.

Я пробовал оба из них примерно 2 дня, и я не смог заставить его работать. Я буквально молюсь о помощи, как я думаю, это не слишком сложно.

Ответы

<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;
}

html, body {
  height: 100%;
}

div#element {
  position: relative;
}

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