为什么我的图像没有与网格列的底部对齐？

Question

我正在尝试设置一个网格系统，其中一侧是表格，另一侧是图像。现在的问题是我希望一切都到视口的底部，但由于某种原因，图像没有到屏幕的底部。

我已经尝试在body, * 和图像本身上添加height: 100vh，但它没有改变。

.login-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: "form form form form form form form form map map map map";
  align-items: center;
  justify-items: center;
}

.login-section .login-form {
  grid-area: form;
}

.login-section .login-map {
  grid-area: map;
  width: 100%;
  overflow-x: hidden;
}

<div class="login-section">
  <div class="login-map">
    <img src="../img/map.png" alt="photo map">
  </div>
  <div class="login-form">
    <div class="login-form-back">
      Bla bla login
    </div>
  </div>
</div>

Answer 1

为login-section 提供height: 100vh 并使用align-items: flex-end - 请参见下面的演示：

body {
  margin: 0; /* Reset body-margin */
}
img {
  display: block; /* Remove whitespace below image*/
  height: 100%; /* Image extending the full height of the grid item */
}

.login-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "form form form form form form form form map map map map";
    /*align-items: center;*/
    align-items: flex-end; /* ADDED */
    height: 100vh; /* ADDED */
    justify-items: center;
}

.login-section .login-form {
    grid-area: form;
}

.login-section .login-map {
    grid-area: map;
    width: 100%;
    overflow-x: hidden;
    height: 100vh; /* image over full viewport*/
}

<div class="login-section">
        <div class="login-map">
            <img src="https://via.placeholder.com/100" alt="photo map">
        </div>
        <div class="login-form">
            <div class="login-form-back">
                Bla bla login
            </div>
        </div>
    </div>