尝试设置最大高度时出现 CSS3 问题：100vh；

Question

我想问一个问题来解决我在尝试建立网站时遇到的问题。 我现在要提一下，我是初学者，我的问题可能有一个简单的答案，我目前看不到。

我有一个带有 2 个部分的 HTML。 第二部分包含 2 个 div，一个带有图像，另一个带有一些文本。 我将文本和图像并排放置，并带有display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; 整个截面的vh min-height: 100vh; ，但带有文本的 div 大于 100vh ...

这是有问题的图片。 请注意，图片为100vh，带有文字的div略大。

https://github.com/StefanMartin92/Iulia-Martin-Photography-Website.git

我正在尝试将整个部分设为 100vh，但如果我更改 window 大小/分辨率，带有文本的 div 会使 go 变得疯狂。 请帮忙！

/* ABOUT SECTION */

.about {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.about-text {
  flex: 2 1 40rem;
  justify-content: space-around;
  background: var(--background-color);
  color: white;
  padding: 3rem 6rem;
}
.about-text h3 {
  padding: 2rem 0rem;
  font-family: "Ruhl Medium";
  align-items: center;
}
.about-text h2 {
  font-family: "Vibes";
  padding: 2rem;
}
.about-image {
  flex: 1 1 40rem;
  max-height: 100vh;
  position: relative;
}
.about-image h5 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  letter-spacing: 2rem;
}
.about-image img {
  width: 100%;
    height: 100%;
  object-fit: cover;      
}

HTML 代码

<section class="about">
  <div class="about-image">
    <h5>MINIMAL</h5>
    <img src="https://stefanmartin92.github.io/Iulia-Martin-Photography-Website/img/about-image.png" alt="portrait-picture">
  </div>
  <div class="about-text flex">
    <h2>Iulia Martin</h2>
    <div class="about-life">
      <h3>My Life</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reprehenderit nobis distinctio vel, earum sapiente, ullam fugiat deleniti dicta magni quos nam aliquam modi. Cumque esse nihil illo dolore fugit.</p>
    </div>
    <div class="about-work">
      <h3>My Work</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reprehenderit nobis distinctio vel, earum sapiente, ullam fugiat deleniti dicta magni quos nam aliquam modi. Cumque esse nihil illo dolore fugit.</p>
    </div>
    <div class="about-contact">
      <h3>Get in touch</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reprehenderit nobis distinctio vel, earum sapiente, ullam fugiat deleniti dicta magni quos nam aliquam modi. Cumque esse nihil illo dolore fugit.</p>
    </div>
  </div>
</section>

Answer 1

min-height设置元素的最小高度。 如果需要，它仍然可以更大，并且更大。 我不知道你到底想要什么，但如果你想让它滚动你可以使用。

max-height: 100vh;
overflow: scroll