我试图让一个子CSS网格尊重父网格的尺寸.我怎么能这样做？
我最初写的是这样的：
https://codepen.io/anon/pen/XVExrj
CSS：
.site,body,html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.parent-grid {
display: grid;
height:300px;
width:300px;
grid-template-rows: 30px 1fr;
grid-template-columns: 1fr;
grid-template-areas:
'nav'
'child';
background-color:grey;
}
.nav {
background-color: #0D47A1;
grid-area: nav;
}
.child { grid-area:child; }
.child-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas:
'test';
background-color:grey;
}
.content {
background-color: red;
overflow:auto;
grid-area:test;
height:3000px;
}
* { Box-sizing: border-Box; }
HTML
我希望’content’是一个可滚动的区域,不会扩展父级的高度(所以它应该是’270px’)
最佳答案
网格项(.child)默认为min-height：auto.应用min-height：0到.child来否决它.
然后添加高度：100％到.child-grid和overflow：auto到内容…
.site,html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.parent-grid {
display: grid;
height: 300px;
width: 300px;
grid-template-rows: 10vh 1fr;
grid-template-columns: 1fr;
grid-template-areas: 'nav' 'child';
background-color: grey;
}
.nav {
background-color: #0D47A1;
grid-area: nav;
}
.child {
grid-area: child;
min-height: 0;
}
.child-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: 'test';
background-color: grey;
height: 100%;
}
.content {
background-color: red;
overflow: auto;
grid-area: test;
}
* {
Box-sizing: border-Box;
}
