grid布局如何把元素拉伸到最大？_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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的效果

如何做？

###

如果你指的是 menu、body 两部分占完剩余空间的话

html, body {
    height: 100%;
}
body {
    margin: 0;
}