Ich habe Probleme mit einem CSS-Raster, dessen Höhe nicht meinen Erwartungen entspricht. Welche Fehler könnte ich machen?

Question

Ich lerne gerade CSS-Raster und wurde gebeten, diese Karte zu erstellen, indem ich sie in Raster zerlege. Im Anhang ist ein Bild des Gitters, das ich erstellen möchte.

Es gibt tatsächlich ein größeres Raster (in CSS Profilraster genannt), in dem alle diese Karten angeordnet sind, und die Höhe dieses größeren Rasters beträgt 255 Pixel. Ich möchte, dass sowohl die Karte als auch das Raster innerhalb der Karte dieser Höhe von 255 Pixeln folgen. Ich habe es geschafft, die Höhe der Karte selbst korrekt hinzubekommen, die Höhe des inneren Rasters jedoch nicht. Das innere Raster selbst besteht aus 2 Zeilen, die erste Zeile ist das Bild und hat eine Höhe von 150 Pixel, die zweite Zeile ist auf 1 Fr eingestellt, aber ich kann das innere Raster nicht auf eine Höhe von 255 Pixel bringen. Ist etwas schief gelaufen?

https://i.stack.imgur.com/g9Eh6.png

Das Folgende ist der jsFiddle-Link: https://jsfiddle.net/40tnwd1o/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
  font-family: roboto;
}

p {
  display: block;
  margin: auto;
}

.profile-card {
  margin-top: 0px;
  width: 150px;
  height: 255px;
  border: none;
  box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301);
}

.profile-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 150px 1fr;
}

.social-ava {
  width: 100%;
  height: 100%;
  background-color: gray;
  transition: opacity 0.15s;
}

.social-ava:hover {
  opacity: 0.8;
}

.social-text {
  height: 100%;
  padding: 8px;
}

.social-name {
  margin-top: 0px;
  cursor: pointer;
  transition: color 0.15s;
}

.social-name:hover {
  color: rgb(52, 98, 167);
}

.mutual-grid {
  display: grid;
  grid-template-columns: 20px 1fr;
  margin-top: 6px;
  align-items: center;
}

.mutual-pic {
  width: 20px;
  height: 20px;
  background-color: gray;
  border-radius: 10px;
  cursor: pointer;
}

.mutual-friend {
  font-size: 12px;
  color: rgb(80, 80, 80);
  cursor: pointer;
}

.mutual-friend:hover {
  text-decoration: underline;
}

.social-add {
  margin-top: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  background-color: rgb(25, 118, 240);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.1s;
}

.social-add:hover {
  opacity: 0.8;
}

<!-- profile card start -->
<div class="profile-card">

  <!-- profile grid start -->
  <div class="profile-grid">

    <!-- row 1: picture start -->
    <div class="image-container">
      <div class="social-ava"></div>
      <!-- placeholder for profile picture -->
    </div>
    <!-- row 1: picture end -->

    <!-- row 2: info start -->
    <div class="social-text">
      <p class="social-name"><strong>Name</strong></p>

      <div class="mutual-grid">
        <!-- grid for mutual friends info start -->
        <div class="mutual-pic"></div>
        <!-- placeholder for mutual's profile picture -->
        <p class="mutual-friend">2 mutual friends</p>
      </div>
      <!-- grid for mutual friends info end -->

      <button class="social-add">Add Friend</button>
    </div>
    <!-- row 2: info end -->

  </div>
  <!-- profile grid end -->

</div>
<!-- profile card end -->

Answer 1

i.stack.imgur.com/g9Eh6.png 这是 profile-grid 的高度，而不是 profile-card。 profile-card 上设置了 255px 的高度。

你需要在 profile-grid 上添加 height:100%。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
  font-family: roboto;
}

p {
  display: block;
  margin: auto;
}

.profile-card {
  margin-top: 0px;
  width: 150px;
  height: 255px;
  border: none;
  box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301);
}

.profile-grid {
  display: grid;
  height: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 150px 1fr;
}

.social-ava {
  width: 100%;
  height: 100%;
  background-color: gray;
  transition: opacity 0.15s;
}

.social-ava:hover {
  opacity: 0.8;
}

.social-text {
  height: 100%;
  padding: 8px;
}

.social-name {
  margin-top: 0px;
  cursor: pointer;
  transition: color 0.15s;
}

.social-name:hover {
  color: rgb(52, 98, 167);
}

.mutual-grid {
  display: grid;
  grid-template-columns: 20px 1fr;
  margin-top: 6px;
  align-items: center;
}

.mutual-pic {
  width: 20px;
  height: 20px;
  background-color: gray;
  border-radius: 10px;
  cursor: pointer;
}

.mutual-friend {
  font-size: 12px;
  color: rgb(80, 80, 80);
  cursor: pointer;
}

.mutual-friend:hover {
  text-decoration: underline;
}

.social-add {
  margin-top: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  background-color: rgb(25, 118, 240);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.1s;
}

.social-add:hover {
  opacity: 0.8;
}

<!-- profile card start -->
<div class="profile-card">

  <!-- profile grid start -->
  <div class="profile-grid">

    <!-- row 1: picture start -->
    <div class="image-container">
      <div class="social-ava"></div>
      <!-- placeholder for profile picture -->
    </div>
    <!-- row 1: picture end -->

    <!-- row 2: info start -->
    <div class="social-text">
      <p class="social-name"><strong>Name</strong></p>

      <div class="mutual-grid">
        <!-- grid for mutual friends info start -->
        <div class="mutual-pic"></div>
        <!-- placeholder for mutual's profile picture -->
        <p class="mutual-friend">2 mutual friends</p>
      </div>
      <!-- grid for mutual friends info end -->

      <button class="social-add">Add Friend</button>
    </div>
    <!-- row 2: info end -->

  </div>
  <!-- profile grid end -->

</div>
<!-- profile card end -->