Question

我想创建一个响应/流畅网格，其中包含2行内容.tier1和.tier2。内容应始终适合视口的尺寸，其中.tier1占据高度的60％，.tier2占据剩余的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... reference），您可以随时介绍CSS3 Viewport Relative Lengths。

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

因此，对于您的示例，只需使用%：

，而不是使用vh

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

JSFiddle demo

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

始终保持视口大小中包含的响应/流体网格内容

1 个答案: