内部元素网格布局的 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: "abc" "def"; } .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>

我该怎么做才能拥有与使用100％的高度像one高度可用？

谢谢！

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: "abc" "def"; } .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>