html - 设置最小高度等于内容高度

Question

我正在尝试将 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>

Answer 1

也许我遗漏了什么，但这似乎有效:

.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>