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

Keep responsive/fluid grid contents contained within viewport size at all times

本文关键字：包含 视口 网格 响应      更新时间：2023-09-26

我想创建一个响应式/流体网格，其中包含 2 行内容.tier1和.tier2。内容应始终适合视口的尺寸，.tier1占据高度的 60%，其余 40% .tier2。目前我不确定最好的方法是什么，使用 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/

取决于您需要支持的浏览器（CanIUse...参考），您可以随时引入 CSS3 视口相对长度。

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

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

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

JSFiddle demo.

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

相关文章：