Html 我的一个部门行为古怪，我不知道'；我不知道为什么

我通过构建一个通用的公文包页面来训练我的编码。到目前为止，我有一个包含一些文本的英雄图像的部分，然后是一个包含一些网格列的部分，稍后将在其中显示一些项目，然后是一个关于部分，它也是一个网格列，上面有一个图像和一些文本。 我被困在这里，因为不知什么原因，我的“关于”部分的演员表现得很奇怪

我可以更改SCS中的图像值，但无法更改文本

当我缩小比例时，我的About div也会覆盖在其他内容上。 我尝试删除Hero部分和About部分之间的网格列，以查看它们是否是问题的原因，但没有，About div仍然没有响应我在scss文件中所做的任何更改（图像除外），About div仍然溢出我在它和Hero部分之间放置的任何内容

发生了什么事

我的HTML

<div class="container__main">
  <div class="container__hero">
    <img class="container__hero__image" src="../assets/hero-background.jpg" />
    <div class="container__hero__text">
      <h1>Your Digital Handyman</h1>
      <p>Digital products with human insight</p>
      <button class="btn">Hire me</button>
    </div>
  </div>
<div class="container__card">
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
</div>
<div class="about__section">
  <div class="about__section__hero">
    <img class="about__section__hero__image" src="../assets/casual-cellphones-chatting.jpg" />
    <div class="about__section__hero__text">
      <p>
        The psychology
        <br />behind user
        <br />experience
      </p>
    </div>
  </div>
</div>

---

我不能完全理解你的问题。请从类.container\u卡和.about\u节中删除这行代码

height: 100vh;

vh在窗口高度，这是造成此问题的原因。如果需要固定高度，可以用px表示高度

---

请尝试此修复，看看它是否有效

您可以发布问题的屏幕截图吗？

height: 100vh;