我正在尝试将 div 设置为 height: 100vh 和 max-height: 800px。但是，在较小的屏幕上，我不希望允许 div 缩小到其内容的高度以下。无论如何，没有 JS 可以完成这个吗？
.hero {
background-color: lightblue;
padding: 8px;
height: 100vh;
max-height: 800px;
}
body {
margin: 0;
}<div class="hero">
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
</div>最佳答案
也许我遗漏了什么，但这似乎有效:
.hero {
background-color: lightblue;
padding: 8px;
min-height: 100vh; /* mobile-first (small screens) */
}
@media (min-height: 800px) { /* only for screens of height 800 or greater */
.hero {
min-height: 0; /* eliminate the earlier rule */
height: 800px;
}
}
body {
margin: 0;
}<div class="hero">
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore, nostrum nulla illum, laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
</div>关于html - 设置最小高度等于内容高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64390614/