完全视口高度缩放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屋!