css - 全视口高度缩放 ​​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

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

我已经尝试了这两种方法大约 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;
}

一个兼容的浏览器应该尽量尊重 top 和 bottom 指令，实际上是管理一个完整的高度。