我的一個 div 表現得很奇怪，我不知道為什么

Question

我正在通過構建一個通用的投資組合頁面來訓練我的編碼。 到目前為止，我有一個部分包含一個帶有一些文本的英雄圖像，然后是一個包含一些網格列的部分，稍后將顯示一些項目，然后是一個關於部分，它也是一個包含圖像和一些文本的網格列。 我被困在這里，因為出於某種原因，我的 About 部分中的 div 表現得很奇怪。

我可以更改我的 scss 中的圖像值，但我不能更改文本。

當我縮小時，我的 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>

我的scss

$primary-color: #41b883;
$secondary-color: #34495e;
$primary-text-color: black;
$secondary-text-color: white;
.container__main {
  .container__hero {
    position: relative;

    .container__hero__image {
      height: 100%;
      width: 100%;
    }
    .container__hero__text {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      h1 {
        font-size: 2.5em;
        color: $secondary-text-color;
        text-align: center;
      }
      p {
        font-size: 1.4em;
        color: $secondary-text-color;
        text-align: center;
      }
      .btn {
        position: absolute;
        background-color: $primary-color;
        left: 33%;
        border: none;
        color: $secondary-text-color;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    }
  }
  .container__card {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: center;
    justify-items: center;

    .container__card__item {
      display: grid;
      grid-template-rows: 210px 210px 80px;
      grid-template-areas: "image" "text" "footer";
      border-radius: 18px;
      background: #fff;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
      text-align: center;
      margin: 50px;

      .container__card__image {
        grid-area: image;
        background: url("~@/assets/website1.jpg");
        background-size: cover;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }
      .container__card__text {
        grid-area: text;
        margin: 25px;
        h2 {
          margin-top: 5;
          font-size: 28px;
        }
        p {
          font-size: 15px;
          font-weight: 300;
        }
        .container__card__text__upperTitle {
          font-size: 15px;
          color: green;
        }
      }
      .container__card__footer {
        grid-area: footer;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: $primary-color;
        cursor: pointer;
        .fas {
          color: #fff !important;
          margin-top: 15px;
        }
      }
    }
  }
  .about__section {
    position: relative;
    height: 100vh;
    display: grid;
    .about__section__hero {
      display: grid;
      grid-auto-columns: repeat(auto-fit, minmax(19rem, 1fr));
      .about__section__hero__image {
        max-width: 100%;
        height: auto;
        .about__section__hero__text {
          p {
            position: absolute;
            font-size: 10em;
            color: $secondary-text-color;
            font-weight: 800;
          }
        }
      }
    }
  }
  @media screen and (max-width: 759px) {
    .container__hero {
      .container__hero__text {
        h1 {
          font-size: 1.3em;
        }
        p {
          font-size: 1.1em;
        }
      }
    }
  }
}

Answer 1

我無法清楚地理解您問題的全部內容。 請從您的 classes.container__card 和.about__section 中刪除這行代碼

height: 100vh;

vh 在 window 高度，這導致了這里的問題。 如果你想要一個固定的高度，你可以以 px 為單位給出高度

請嘗試此修復程序，看看它是否有效