刚拿起网格我在移动设备上浏览网站时遇到了一些问题。如果我将网格设置为1200px的高度，那么此后的任何元素都应出现在正常的文档流程中，对吗？
那么当网格拉伸超过其原始高度值时，我们如何在移动设备上处理这个问题，因为在网格跟随正常文档流并且期望网格以1200px完成之后我正在经历元素结果出现在网格元素后面。
这里有一个GIF来说明是否有人可以阐明这一点，这将是非常有用的所有标记也在下面（注意JS小提取这个＆＃34; bug＆＃34;不展示自己）
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;
}
}
答案 0 :(得分：0)
我已经解决了我应该一直使用高度自动。