全视口高度缩放div只是css no js ...可能吗？

Question

好吧,我试图得到一个div来扩展,高度始终是视口的高度.我将链接到我的示例,因为它需要一些解释.

www.madmediablitz.com/tv/precentdemo.html

上面的链接是我最接近的解决方案,我希望这里有人会发现它很容易修复.我想要发生的是电视始终是视口的高度(在一定程度上,最小高度:~400px;最大高度:~700px;).我在那里使用的代码基于http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/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;
}

兼容的浏览器应该尝试尊重顶部和底部指令,实际上管理一个完整的高度.