Html CSS 网格自动高度不适用于特定网格区域

发布于12月25日

我try 使用"AUTO"，这样网格区域"A"就不会扩展到内容之外.但是，无论我怎么try ，网格区域都会填满这个空白空间.

下面是网格的css:

   height: 100vh;
   grid-template-areas:
           `"A A E"
            "B C E"
            "B D F"`

   grid-template-rows: "auto auto 1fr";
   grid-template-columns: "25% 50% 25%";

我想到的一个解决方案是将A、B、C、D网格项目放在弹性框中的左边；E和F放在右边.

推荐答案

这是你想要的吗？

body {
  height: 100vh;
  display:grid;
  grid-template-areas: 
    "main nav";
  grid-template-columns: 75% 25%;
}

main{
  height: 100%;
  display:grid;
  grid-template-areas:
    "A A"
    "B C"
    "B D";

  grid-template-rows: auto auto 1fr;
  grid-template-columns: 37.5% 62.5%;
}

nav{
   height: 100%;
  display:grid;
  grid-template-areas:
    "E"
    "E"
    "F";
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 100%;
}

#A{
  background-color:#f93443; grid-area: A;
}

#B{
  background-color:#a9e31d; grid-area: B;
}

#C{
  background-color:#ffe103; grid-area: C;
}

#D{
  background-color:#b795f4; grid-area: D;
}
#E{
  background-color:#037bff; grid-area: E;
}
#F{
  background-color:#61caa0; grid-area: F;
}

<main>
  <div id="A">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lectus vestibulum mattis ullamcorper velit. Diam in arcu cursus euismod quis viverra nibh.
  </div>
  <div id="B">
    Interdum posuere lorem ipsum dolor sit. Id diam vel quam elementum pulvinar etiam non quam lacus. Elit ut aliquam purus sit amet luctus venenatis lectus.
  </div>
  <div id="C">
    Nibh ipsum consequat nisl vel pretium lectus. Faucibus et molestie ac feugiat sed. Morbi leo urna molestie at elementum eu facilisis. Est ultricies integer quis auctor elit. Feugiat vivamus at augue eget. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Sodales ut etiam sit amet nisl purus. Sit amet consectetur adipiscing elit duis. Ut ornare lectus sit amet est placerat in. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.

    Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Odio facilisis mauris sit amet. Orci ac auctor augue mauris augue neque. Sollicitudin tempor id eu nisl nunc mi ipsum. Proin nibh nisl condimentum id venenatis a condimentum vitae. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Ut aliquam purus sit amet luctus venenatis lectus. Imperdiet massa tincidunt nunc pulvinar sapien et. Diam phasellus vestibulum lorem sed. Arcu cursus euismod quis viverra nibh cras. Sagittis aliquam malesuada bibendum arcu vitae elementum. Augue eget arcu dictum varius. Iaculis nunc sed augue lacus viverra.
  </div>
  <div id="D">
    Interdum posuere lorem ipsum dolor sit. Id diam vel quam elementum pulvinar etiam non quam lacus. Elit ut aliquam purus sit amet luctus venenatis lectus.
  </div>
</main>
<nav>
  <div id="E">
    Interdum posuere lorem ipsum dolor sit. Id diam vel quam elementum pulvinar etiam non quam lacus. Elit ut aliquam purus sit amet luctus venenatis lectus.
    Nibh ipsum consequat nisl vel pretium lectus. Faucibus et molestie ac feugiat sed. Morbi leo urna molestie at elementum eu facilisis. Est ultricies integer quis auctor elit. Feugiat vivamus at augue eget. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Sodales ut etiam sit amet nisl purus. Sit amet consectetur adipiscing elit duis. Ut ornare lectus sit amet est placerat in. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.
    Dictumst quisque sagittis purus sit amet. Lectus quam id leo in vitae turpis. Velit ut tortor pretium viverra suspendisse potenti nullam. Nulla facilisi cras fermentum odio eu feugiat pretium. Mattis molestie a iaculis at. Suspendisse faucibus interdum posuere lorem ipsum. Diam donec adipiscing tristique risus nec feugiat in fermentum.

  </div>
  <div id="F">
    Interdum posuere lorem ipsum dolor sit. Id diam vel quam elementum pulvinar etiam non quam lacus. Elit ut aliquam purus sit amet luctus venenatis lectus.
  </div>
</nav>