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