完整的视口高度缩放 div 只是 css 没有 js ......可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1509589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full viewport height scaling div just css no js... Possible?
提问by pixparker
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.
好的，我正在尝试缩放 div，并且高度始终是视口的高度。我将链接到我的示例，因为它需要一些解释。
www.madmediablitz.com/tv/precentdemo.html
www.madmediablitz.com/tv/precentdemo.html
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/.
上面的链接是我最接近解决方案的链接，我希望这里有人会发现修复起来很简单。我想要发生的是电视始终是视口的高度（在某种程度上，最小高度：~400px；最大高度：~700px;）。我在那里使用的代码基于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.
这是我不想发生的事情。如果您调整窗口大小，您会看到它没有按比例缩放。
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.
我已经尝试了这两种方法大约 2 天了，但我一直无法让它工作。正如我所想的那样，我实际上是在祈求帮助，这并不太复杂。
回答by pixparker
Please see this: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
请看这个：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;
}
That's it.
就是这样。
回答by Matthieu M.
You can use absolute positioning in a quite surprising way I surmise:
我猜你可以以一种非常令人惊讶的方式使用绝对定位：
div#element {
position: relative;
}
img.vertical {
position: absolute;
top: 0; // no need for px or em
bottom: 0;
}
A compliant browser should try to respect both the top and bottom directives, actually managing a full height.
一个兼容的浏览器应该尝试同时尊重 top 和 bottom 指令，实际上管理一个完整的高度。
