完全视口高度缩放div只是css没有js ...可能？ [英] Full viewport height scaling div just css no js... Possible?

问题描述

好吧，我想要一个div来缩放，高度始终是视口的高度。我将链接到我的示例，因为它需要一些解释。

Ok, I'm trying to get a div to scale and the height is always the height of the viewport. I'm going to link to my examples as it needs some explaining.

www.madmediablitz.com/tv/precentdemo.html

www.madmediablitz.com/tv/precentdemo.html

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

The link above is the closest I've come to a solution and I'm hoping that someone here will find it simple to fix. What I want to happen is the tv to always be the height of the viewport (to a degree, min-height:~400px; max-height:~700px;). The code that I used there is based on http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

www.madmediablitz.com/tv/precentdemo_alt.html

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

This one is what I DON'T want to happen. IF you resize your window you will see it doesn't scale proportionally.

我一直在尝试这两个大约2天，我不能得到它的工作。

I've been trying both of these for about 2 days now and I haven't been able to get it to work. I'm literally praying for help as I think, this isn't too complicated.

推荐答案

请看这里：
http://stanislav.it/ 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;
}

就是这样。

这篇关于完全视口高度缩放div只是css没有js ...可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！