Fatal编程技术网
  • css/
  • Css 文档流和网格高度使元素显示在网格下方。

Css 文档流和网格高度使元素显示在网格下方。

css grid

Css 文档流和网格高度使元素显示在网格下方。,css,grid,css-grid,Css,Grid,Css Grid,刚拿起网格，我有一些问题，当一个网站是在移动查看。如果我将网格的高度设置为1200px，那么在此之后的任何元素都应该出现在正常的文档流中，对吗 那么，当网格被拉伸超过其原始高度值时，我们如何在移动设备上处理这个问题呢？因为从我的经验来看，网格遵循正常的文档流，并期望网格以1200px的速度完成，结果显示在网格元素后面 这里有一个gif来说明，如果有人能够解释这一点，那么下面的所有标记都会非常有用（注意JS FIDLE上的“bug”不会自行出现） HTML 我已经解决了，我应该一直使用高度自动

刚拿起网格，我有一些问题，当一个网站是在移动查看。如果我将网格的高度设置为1200px，那么在此之后的任何元素都应该出现在正常的文档流中，对吗

那么，当网格被拉伸超过其原始高度值时，我们如何在移动设备上处理这个问题呢？因为从我的经验来看，网格遵循正常的文档流，并期望网格以1200px的速度完成，结果显示在网格元素后面

这里有一个gif来说明，如果有人能够解释这一点，那么下面的所有标记都会非常有用（注意JS FIDLE上的“bug”不会自行出现）

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>

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


}