如何在网格css上设置背景

Question

@media only screen and (min-width: 1024px) {
* {
margin: 0px;
padding: 0px;
border: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
body {
min-height: 100%;
}
.gridFirstTP {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.First-display {
height: 100%;
width: 100%;
background: rgb(254, 122, 255);
background: linear-gradient(
96deg,
rgba(254, 122, 255, 1) 0%,
rgba(55, 154, 237, 1) 67%
);
}

.statistiquesRight {

grid-column: 3/3;
grid-row: 3/1;
background: rgb(105, 177, 239);
background: linear-gradient(
21deg,
rgba(105, 177, 239, 1) 0%,
rgba(235, 119, 238, 1) 83%
);
box-shadow: -6px 0px 15px -4px;
}
}

<div class="First-display">
<div class="gridFirstTP">
<div class="statistiquesRight">
<div class="domStats">
<h2 id="rightstats">-Les Statistiques-</h2>
<div>
<p class="articleStatsl">Nombre d'article visités:</p>
<p class="articleStatsl" id="statspress">0</p>
</div>
</div>
</div>
</div>
</div>

我有一个项目网站，我在那里尝试一些东西，我正在努力找出一些东西。

我有一个css网格

grid-column: 3/3;
grid-row: 3/1;

所以这个元素占据了屏幕的整个右侧，这很好。

但出于某些原因，我的意思是，我的div。这个元素的长度并没有完全呈现出来，出于某种原因，它没有占据整个屏幕，元素被呈现出来，但就在我网页的中间，元素停止了，它似乎显示了网页的默认背景，如果我理解正确，我必须设置一个背景，但我已经为此制作了一个div：

.First-display {
height: 100%;
width: 100%;
background: rgb(254, 122, 255);
background: linear-gradient(
96deg,
rgba(254, 122, 255, 1) 0%,
rgba(55, 154, 237, 1) 67%
);
}

是不是因为css网格，我必须添加一些东西，因为页面现在的行为不同了？

我应该直接在我的元素上做吗？或者这是个坏主意。非常感谢您抽出时间<3

Answer 1

Height: 100%并不能完全按照您的意思工作(对于未定位的元素(。您需要将(min-)height: 100vh设置为.gridFirstTP元素才能使用整个视口高度。

@media only screen and (min-width: 1024px) {
* {
margin: 0px;
padding: 0px;
border: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
body {
min-height: 100%; /* you can remove it */
}
.gridFirstTP {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 100vh;
}
.First-display {
height: 100%; /* you can remove it */
width: 100%;
background: rgb(254, 122, 255);
background: linear-gradient(
96deg,
rgba(254, 122, 255, 1) 0%,
rgba(55, 154, 237, 1) 67%
);
}

.statistiquesRight {

grid-column: 3/3;
grid-row: 3/1;
background: rgb(105, 177, 239);
background: linear-gradient(
21deg,
rgba(105, 177, 239, 1) 0%,
rgba(235, 119, 238, 1) 83%
);
box-shadow: -6px 0px 15px -4px;
}
}

<div class="First-display">
<div class="gridFirstTP">
<div class="statistiquesRight">
<div class="domStats">
<h2 id="rightstats">-Les Statistiques-</h2>
<div>
<p class="articleStatsl">Nombre d'article visités:</p>
<p class="articleStatsl" id="statspress">0</p>
</div>
</div>
</div>
</div>
</div>