Question

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

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

.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

为height: 100vh赋予login-section并使用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>

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

1 个答案: