需要网格高度 90vh，但该行采用随机高度

Question

我有一个div 必须有 高度：90vh 里面有一个有 4 行的网格，它的内容可以根据我收到的内容而增加高度。 在我的网络中，如果我删除 90vh 属性，则行的高度将取其内容的高度。

这适用于 AMP 移动格式，请记住这一点。

谢谢:) CSS 初学者

.bg-img-vodItem {
background: rgba(45, 45, 45, 1);
}
.first-look {
height: 90vh;
}
.content-1200-center {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1200px;
}
.vodItemHead {
text-align: left;
height: 100%;
display: grid;
grid-template-columns: 50% 50%;
}
.vodItemHeadT {
height: 20%;
width: 700px;
max-width: 90%;
margin: 0 auto;
grid-column: 1/3;
grid-row: 1;
}
.vodItemHeadT h1 {
font-size: 8vmin;
font-weight: 800;
line-height: 1;
margin: 0;
padding: 3% 0;
}
.whiteColor {
color: #fff;
}
.vodItemHeadSubT {
max-width: 100%;
height: auto;
margin: 0 auto;
width: 600px;
grid-column: 1/3;
grid-row: 2;
}
.vodItemHeadSubT>section {
padding: 0;
}
div.container {
max-width: 700px;
}
.container,
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
div>p {
font-size: 14px;
line-height: 1.8;
padding: 0;
margin: 0;
width: 600px;
max-width: 100%;
}
.vodItemHeadLogo {
width: 600px;
max-width: 90%;
height: auto;
margin: 0 auto;
grid-column: 1/3;
grid-row: 3;
}
.justify-left-im {
justify-content: center;
}
.grid-auto-fit {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.img-max-width {
margin-left: 0;
max-width: 100%;
text-align: center;
}
.vodItemHeadBtn {
height: auto;
margin: 0 auto;
max-width: 100%;
width: 600px;
padding-bottom: 10%;
grid-column: 1/3;
grid-row: 4;
text-align: center;
}
.vodItem-btn-full {
border-radius: 25px;
padding: 7px 10px;
font-size: 17px;
font-weight: 700;
}
.btn-white {
color: #000;
background-color: #fff;
border: 2px solid #fff;
}
.fa-chevron-circle-right {
font-family: FontAwesome;
font-weight: 900;
}

<div class="bg-img-vodItem first-look">
<div class="vodItemHead content-1200-center">
<div class="vodItemHeadT ">
<h1 class="whiteColor">Title</h1>
</div>
<div id="headerTvShow" class="vodItemHeadSubT  whiteColor">
<section class="section-white">
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
<div class="vodItemHeadLogo">
<div class="justify-left-im d-lg-none d-xl-block grid-auto-fit img-percent-container">
<div class="grid-elem-auto-fit img-percent-content-home img-max-width">
<div class="img-percent-logo-50 fullLeft-1">
<amp-img class="contain" alt="image" src="https://dummyimage.com/110x80/000/fff" width="110" height="80" layout="fixed">
</amp-img>
</div>
</div>
</div>
</div>
<div class="vodItemHeadBtn">
<a href="#best_content">
<button class="vodItem-btn-full btn-white ">Button <span class="fa fa-chevron-circle-right margin-icon-left"></span></button>
</a>
</div>
</div>
</div>

我希望每一行都采用其内容的高度，但例如，如果它是一个长文本，按钮不会沿着主div 向下移动。

Answer 1

你可以试试min-height

.first-look {
min-height: 90vh;
}

希望这能解决您的问题。

Answer 2

您可以使用最大高度：90vh; 而不是高度：90vh;