css - 内部元素网格布局的 100% 高度

Question

我有一个元素，我想使用网格布局设计中可用高度的 100%。

我所拥有的是：

.wrapper {
  background: #F7F7F7 !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 15px;
  grid-template-areas: "a b c" "d e f";
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

.four {
  grid-area: d;
}

.five {
  grid-area: e;
}

.six {
  grid-area: f;
}

<div class="wrapper">
  <div class="one">
    <image height="100%">
  </div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>

</div>

如何使图像的高度使用one可用高度的 100%？

谢谢！

标签： css

Answer 1

你可以给它一个类，让它的宽度和高度为 100%

.wrapper {
  background:#000 !important;
  width:100%;
  height:100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 15px;
  padding:20px;
  grid-template-areas:  
                        "a b c"
                        "d e f";
                        
  }
.scene{
width:100%;
height:100%;
}
.white{
background:#fff;
}
.one{
  grid-area:a;
  
}
.two{
  grid-area:b;
}
.three{
  grid-area:c;
}
.four{
  grid-area:d;
}
.five{
  grid-area:e;
}
.six{
  grid-area:f;
  }

<div class="wrapper">
  <div class="one white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
  <div class="two white"></div>
  <div class="three white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
  <div class="four white"></div>
  <div class="five white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
  <div class="six white" ></div>

</div>