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

【问题标题】：Set min-height equal to content height设置最小高度等于内容高度
【发布时间】：2020-10-17 06:18:43
【问题描述】：

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

【问题讨论】：

标签： html css height

【解决方案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>

【讨论】：

这很接近，如果您将height: 100vh 添加到媒体查询规则，它会产生所需的结果。标准是 hero 应该是视口的高度，但不小于其内容且不高于 800px
或者，将max-height 删除并将height: 800px 添加到媒体查询规则也可以，并且可能更清晰、更直接。
我相应地更新了它。随意再次更改或发布您自己的最终解决方案。

【解决方案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>

【讨论】：