文档流和网格高度制作元素出现在网格下方。答案

【问题标题】：Document flow and grid height making elements appear below grid.文档流和网格高度制作元素出现在网格下方。
【发布时间】：2018-11-20 05:23:44
【问题描述】：

刚拿起网格我在移动设备中查看网站时遇到了一些问题。如果我将网格设置为 1200px 的高度，那么此后的任何元素都应该出现在正常的文档流中，对吧？

因此，当网格被拉伸得比其原始高度值更远时，我们如何在移动设备上处理这个问题，因为从我所经历的网格之后的元素遵循正常的文档流并期望网格以 1200 像素完成并且结果出现在网格元素的后面。

这是一个 gif 来说明是否有人可以阐明这一点，这将非常有帮助，下面的所有标记也将非常有用（请注意 JS fiddle 这个“错误”不会显示出来）

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; 
    }


}

【问题讨论】：

标签： css grid css-grid

【解决方案1】：

我已经解决了，我应该一直使用自动高度。

【讨论】：