javascript - 始终将响应/流体网格内容包含在视口大小内

Question

我想创建一个具有 2 行内容.tier1和.tier2. 内容应始终适合视口的尺寸，.tier1占高度.tier2的 60%，其余 40%。目前我不确定最好的方法是什么，使用javascript我可以关注视口尺寸并设置一个高度，以便.tier容器应用%高度生效但我想知道我是否可以这样做使用 CSS？

CSS

.content1 {
    height: 60%;
}
.content2 {
    height: 40%;
}

HTML

<div class="container">
    <div class="tier">
        <div class="content content1">
            <img src="http://dummyimage.com/600x400/000/fff">
        </div>
    </div>
    <div class="tier">
        <div class="content content2">
            <img src="http://dummyimage.com/600x400/dedede/fff">
        </div>
    </div>
</div>

小提琴 http://jsfiddle.net/EK6QT/1/

Answer 1

根据您需要支持的浏览器（CanIUse... 参考），您总是可以引入 CSS3 Viewport Relative Lengths。

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

因此，对于您的示例，而不是使用%，只需使用vh：

.content1 {
    height: 60vh;
}
.content2 {
    height: 40vh;
}

JSFiddle 演示。

如果您想更深入地了解这些是什么，我在这里有另一个答案，讨论了这些：https ://stackoverflow.com/a/16837667/1317805