grid布局如何把元素拉伸到最大？
grid demo：
<!DOCTYPE html>
<html>
<head>
<style>
#content {
height:100%;
display: grid;
grid-template-columns: repeat(auto-fill,300px);
grid-template-rows: 80px 1fr 40px;
grid-column-gap:10px;
grid-row-gap:20px;
grid-template-areas: 'header header header'
'menu body body'
'footer footer footer'
}
.header{
grid-area: header;
}
.menu{
grid-area: menu;
}
.body{
grid-area: body;
}
.footer{
grid-area: footer;
}
</style>
</head>
<body>
<div id="content">
<span class="header" style="background-color: red">header</span>
<span class="menu" style="background-color: black">menu</span>
<span class="footer" style="background-color: yellow">footer</span>
<span class="body" style="background-color: blue">body</span>
</div>
</body>
</html>希望把中间部分拉伸到铺满屏幕
类似于flex-grow:1的效果
如何做？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果你指的是
menu、body两部分占完剩余空间的话