刚刚拿起网格，我在移动设备上查看网站时遇到了一些问题。如果我将网格设置为高度为 1200px，那么之后的任何元素都应该出现在正常的文档流中，对吧？
那么，当网格被拉伸到比其原始高度值更远的地方时，我们如何在移动设备上处理这个问题，因为从我所经历的情况来看，网格后的元素遵循正常的文档流并期望网格以 1200px 完成，结果出现在网格元素后面。
这是一个 gif 来说明是否有人可以阐明这一点，这将非常有帮助，所有标记也在下面(请注意，在 JS 小提琴上，这个"错误"不会表现出来(
https://gyazo.com/1f3d18693c8df5a339fb5fdc09e8d2c6
.HTML
<!DOCTYPE html>
<html lang="" dir="ltr">
<head>
<meta charset="utf-8">
<title>Divine Tofu - Vegan Art and Apparel</title>
<link rel="stylesheet" href = "style/style.css" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "js/menuscript.js"></script>
</head>
<body>
<nav id="wrapper">
<div class="sideSpacer">
<div id="logoCont">
<img id="logo" src="images/navicons/logo.png" alt="Devine Tofu Logo" />
<div id="logoText"><img id = "logo" class="logotext" src="images/navicons/logotext.png"></div>
</div>
<div id="navWrapper">
<ul>
<a href="#apparel">
<li>Apparel</li>
</a>
<a href="#gal">
<li>Gallery</li>
</a>
<a href="#contactmetitle">
<li>Contact</li>
</a>
<a href="https://www.etsy.com/uk/shop/DivineTofu">
<li>Etsy Store</li>
</a>
</ul>
</div>
<div id="logoCont">
<img id = "logo" class="logobot" src="images/navicons/bottomCircle.png" alt="Devine Tofu Logo" />
</div>
<div id="smWrap">
<ul id="smItems">
<li><img class="icon" src="images/navicons/fb.png" /></li>
<li><img class="icon" src="images/navicons/insta.png" /></li>
<li><img class="icon" src="images/navicons/twitter.png" /></li>
</ul>
</div>
</div>
<a href="https://www.etsy.com/uk/shop/DivineTofu">
Etsy Store
</a>
</nav>
<div id = "grid">
<div id = "grid-item1">
<h1>Commissions</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, felis ut tempus pulvinar, lorem urna imperdiet velit, ac semper lectus dolor at odio. Proin vitae sapien ex. Sed at varius diam. Fusce sit amet nulla lacinia, sodales leo eu, porta urna. Vestibulum rhoncus facilisis nisl vel dapibus. Vestibulum mollis egestas bibendum. Curabitur fringilla felis vitae nunc efficitur viverra. Nunc eleifend faucibus sodales. Donec libero magna, efficitur vel nisi non, tempus tincidunt quam.</p>
<!-- Slider -->
<img src = "images/Gallery/gallery3.png">
</div>
<div id = "grid-item2">
<h1>Warcraft Chibis</h1>
<br>
<p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
</div>
<div id = "grid-item3">
<img src = "images/chibi/tcomm5.png" id = "imgtrans">
<img src = "images/chibi/tcomm1.png" id = "imgtrans">
<img src = "images/chibi/tcomm3.png" id = "imgtrans">
<img src = "images/chibi/tcomm2.png" id = "imgtrans">
<img src = "images/chibi/tcomm7.png" id = "imgtrans">
<img src = "images/chibi/tcomm10.png" id = "imgtrans">
</div>
<div id = "grid-item4">
<br>
<h1>Original Artwork</h1>
<br>
<p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
</div>
<div id = "grid-item5">
<img src = "images/Gallery/icongall1.png" id = "imgtrans">
<img src = "images/Gallery/icongall6.png" id = "imgtrans">
<img src = "images/Gallery/icongall3.png" id = "imgtrans">
<img src = "images/Gallery/icongall4.png" id = "imgtrans">
<img src = "images/Gallery/icongall5.png" id = "imgtrans">
<img src = "images/Gallery/icongall2.png" id = "imgtrans">
</div>
</div>
<!--This is the red bar -->
<div class = "aftergrid"> </div>
</body>
</html>
.CSS
*{
box-sizing: border-box;
}
.aftergrid {
width: 100%;
height: 40px;
background-color: red;
}
#grid {
margin: 0 auto;
display: grid;
max-width: 100%;
height:1200px;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(8,1fr);
grid-gap: 5px 5px;
}
#grid div {
background-color: hsla(126, 100%, 100%, 0.63);
box-shadow: 0px 20px 250px 10px #fffdd0 inset;
}
#grid:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.fixed-width {
max-width: 90%;
margin:0 auto;
}
h1 {
text-align: center;
}
#grid-item1{
background-color: aliceblue;
text-align: center;
}
#grid-item1 p{
position: relative;
margin-bottom: 1em;
padding: 1em;
animation-name: fadeinleft;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
#grid-item1 h1 {
position: relative;
animation-name: fadeinright;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
@keyframes fadeinleft{
0% {left:-50px;
opacity: 0;
}
80% {left: 10px;
}
100% {left:0px;
opacity: 1;}
}
@keyframes fadeinright {
0% {left:50px;
opacity: 0;
}
80% {left: -10px;
}
100% {left:0px;
opacity: 1;}
}
#grid-item1>img{
width: 80%;
}
#grid-item2{
grid-row: 4/5;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
#grid-item2 p {
padding: 1em;
display: flex;
}
#grid-item3{
grid-row: 5/6;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#grid-item4{
grid-row: 6/7;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
#grid-item4 p {
padding:1em;
}
#grid-item5{
grid-row: 7/8;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.icon {
max-width: 80%;
margin: 0 auto;
}
#imgtrans{
width: 32%;
transition: all .2s ease-in-out;
padding: 5px;
overflow: auto;
position: relative;
z-index: 3;
}
#imgtrans:hover{
transform: scale(1.1);
}
#navWrapper ul li:hover {
opacity: 1;
filter: alpha(opacity=0.5);
background-color: rgba(255, 74, 1, 0.54);
}
#navWrapper ul {
margin: 0 auto;
width:96%;
}
#navWrapper ul li {
text-align: center;
margin: 10px 5px 10px 0px;
padding: 1%;
color:white;
opacity: 0.6;
transition: background-color 0.25s, opacity 0.25s ease-in;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
width:98%;
font-size: 28px;
font-family: 'Shadows Into Light Two', cursive;
}
#navWrapper ul a {
text-decoration: none;
}
#parallax {
background-image: url(../images/parallaxbg.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
opacity: 0.1;
height: 100%;
width: 100%;
z-index: 0;
margin: 0 auto;
}
.sideSpacer {
position:fixed;
top:0;
left:0;
height:100vh;
width:220px;
background-color: hsla(36, 100%, 50%, 0.80);
z-index: 2;
transition: width .5s ease-out;
}
.sideSpacer:hover {
width:250px;
}
#flexcont{
display: block;
}
#flexlist{
height: 100%;
transition: all 1s;
}
#navIcons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mobileLogo {
width:100px;
height: 100px;
}
.mobileNavButton {
width: 50px;
height: 50px;
align-self: center;
margin-right: 15px;
}
.mobileNavButton:hover {
cursor: pointer;
}
#smWrap {
width:100%;
}
#smItems{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
#smItems li{
text-align: center;
opacity: 0.6;
width:66px;
margin-bottom: 10px;
transition: width 2s, opacity 0.25s ease-in;
}
#smItems li:hover {
opacity: 0.9;
}
#logoCont{
margin:0 auto;
width:100%;
}
#logoCont{
font-weight: bold;
width: 100%;
opacity: 0.8;
color:white;
transition: width 2s, opacity 0.5s ease-in;
}
#logoCont:hover {
opacity: 1;
filter: alpha(opacity=0.5);
}
#logo{
max-width: 94%;
margin-left:3%;
margin-right:3%;
margin-top: 5%;
}
#logoText {
text-align: center;
}
.logobot{
max-width: 80%;
margin:10%;
padding-top: 1em;
}
#topNav {
width: 100%;
background-color: hsla(36, 100%, 50%, 0.80);
}
/* Tablet */
@media only screen and (min-width: 500px) {
#grid {
max-width: 90%;
margin: 0 auto;
}
.fixed-width {
width: 80%;
margin: 0 auto;
}
}
@media only screen and (max-width: 900px){
.sideSpacer {
display:none;
}
}
/* Desktop */
@media only screen and (min-width: 900px) {
#grid {
width: 70%;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12,1fr);
grid-gap: 5px 5px;
margin-left: 25%;
}
#grid-item1{
grid-row: 2/12;
grid-column: 5/9;
background-color: aliceblue;
}
#grid-item2{
grid-row: 1/4;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item3{
grid-row: 4/7;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item4{
grid-row: 7/10;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item5{
grid-row: 10/13;
grid-column: 1/4;
background-color: aliceblue;
}
#topNav {
display: none;
}
.aftergrid {
margin-top: 25px;
}
}
我已经解决了，我应该一直使用高度自动。