Set min-height equal to content height

user_9084125 0
Viewed 73

I'm trying to set a div to have height: 100vh with a max-height: 800px. However, on smaller screens I don't want the div to be allowed to shrink below the height of its content. Is there anyway to accomplish this without 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>

height css html
2 Answers

Maybe I'm missing something, but this seems to work:

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

user_12648040

Flexbox can help you here. You simply need an extra wrapper:

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

user_86203330
Related