如何在 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;
  }
}

如何在 css 中使网格高度与响应高度中的网格相同

How to make a grid height same with grid in responsive height in css

css

css-grid

responsive