我试图让我的行在 CSS 网格中具有相同的高度,但同时,应该有一个由 vh 指定的最大高度。我想要的是,如果有 4 行,最大高度为 100vh
,而这 4 行中当前最大的高度是 70vh
,我想要所有行都为 70vh
。但是,如果假定最大高度为 120vh
,我希望所有行的高度都为 100vh
。有办法吗?下面是我到目前为止的代码,我是 CSS 网格的新手所以请帮助我!如果有什么更简单的方法可以实现我想做的事情,请帮助指导我,谢谢!
.project-grid {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
row-gap: 1%;
grid-template-areas: "card" "activities" "requirements" "quotations" "notations"
}
.card-row {
grid-area: card;
}
.activities-box {
grid-area: activities;
overflow: auto;
}
.requirements-box {
grid-area: requirements;
overflow: auto;
}
.quotations-box {
grid-area: quotations;
overflow: auto;
}
.notations-box {
grid-area: notations;
overflow: auto;
}
有了这个,行都遵循相同的最大高度,但没有设置最大高度。
最佳答案
只需将 max-height
设置为网格项:
.box {
display: grid;
grid-template-columns: 100%;
grid-auto-rows: 1fr;
row-gap: 5px;
}
.box > * {
max-height:100vh;
overflow:auto;
border:2px solid red;
background:#f2f2f2;
box-sizing:border-box;
}
<div class="box">
<div><div style="height:50vh"></div></div>
<div></div>
<div></div>
<div></div>
</div>
内容大于100vh;
.box {
display: grid;
grid-template-columns: 100%;
grid-auto-rows: 1fr;
row-gap: 5px;
}
.box > * {
max-height:100vh;
overflow:auto;
border:2px solid red;
background:#f2f2f2;
box-sizing:border-box;
}
body {
margin:0;
}
<div class="box">
<div><div style="height:130vh"></div></div>
<div></div>
<div></div>
<div></div>
</div>
关于html - CSS Grid - 行高度相同(最大高度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62626333/