Почему мое изображение не выравнивается по низу столбца сетки? - PullRequest
Новая
       25

Почему мое изображение не выравнивается по низу столбца сетки?

0 голосов
/ 13 февраля 2019

Я пытаюсь настроить систему сетки с одной стороны формы, а другой - изображение.Теперь проблема в том, что я хочу, чтобы все было в нижней части области просмотра, но по какой-то причине изображение не попадает в нижнюю часть экрана.

Я уже пытался поставить 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>

1 Ответ

0 голосов
/ 13 февраля 2019

Дайте 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>
...