极客观点
项目管理
HarmonyOS
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两部分占完剩余空间的话