Полное масштабирование высоты области просмотра div просто css no js ... Возможно?

Question

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

www.madmediablitz.com / телевизор / precentdemo.html

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

www.madmediablitz.com / телевизор / precentdemo_alt.html

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

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

Answer 1

Пожалуйста, посмотрите это: 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;
}

Вот и все.

Answer 2

html, body {
  height: 100%;
}

Читать эту статью.

Answer 3

Вы можете использовать абсолютное позиционирование совершенно неожиданным образом:

div#element {
  position: relative;
}

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

Соответствующий браузер должен соблюдать обе верхние и нижние директивы, фактически управляя полной высотой.