Как сделать высоту сетки такой же, как у сетки в отзывчивой высоте в css

Question

У меня есть некоторые проблемы, и я просто новая в сетке css, у меня есть 2 сетки, и их высота не совпадает с их высотой в отзывчивой высоте, я поместил код и изображение ниже:

• Для изображения:

• Изображение, когда я установил отзывчивый:

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

Это для кода в css:

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
  font-size: 22px;
}

.container {
  display: grid;
  height: 10px;
}

.content-left {
  background-color: #00c3ff;
  padding: 1rem;
  height: 44.3rem;
}

.content-right {
  background-color: #ffffff;
  padding: 1rem;
  height: 44.3rem;
}

@media (min-width: 1025px) {
  .container {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .content-left {
      height: 82.4rem;
  }

  .content-right {
      height: 82.4rem;
  }
}

Answer 1

Просто измените свои высоты на 100vh.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }

html {
  font-size: 22px;
}

.container {
  display: grid;
  height: 10px;
}

.content-left {
  background-color: #00c3ff;
  padding: 1rem;
  height: 100vh;
}

.content-right {
  background-color: #ffffff;
  padding: 1rem;
  height: 100vh;
}

@media (min-width: 1025px) {
  .container {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .content-left {
      height: 100vh;
  }

  .content-right {
      height: 100vh;
  }
}