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

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>

Answer 2

Flexbox 可以在这方面为您提供帮助。您只需要一个额外的包装器：

.extra {
  display:flex;
  flex-direction:column;
}

.hero {
  background-color: lightblue;
  padding: 8px;
  flex-basis: 100vh;
  max-height: 800px;
  box-sizing: border-box;
}

body {
  margin: 0;
}

<div class="extra">
  <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>
</div>

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

Set min-height equal to content height

html

css

height