全视口高度缩放 ​​div 只是 css 没有 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

这是我不想发生的事情。如果您调整窗口大小，您会发现它不按比例缩放。

我已经尝试这两种方法大约两天了，但一直无法让它发挥作用。我确实在祈祷帮助，因为我认为这并不太复杂。

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

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