嵌套 CSS-grid 隐式填充父网格的剩余高度
Nested CSS-grid implicitly fill remaining height from parent grid
我正在尝试让子 CSS-grid 尊重父网格的尺寸。我怎样才能做到这一点?
我最初是这样写的:
.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;
}
* {
box-sizing: border-box;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="child-grid">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
</div>
我想让 'content' 成为一个不会扩展父级高度的可滚动区域(因此它应该是“270px”)。
好吧,给你的子网格一个专用的高度:
height: 240px;
并设置
overflow: auto;
所以,确实,身高是有保障的。如有必要,将出现滚动条。
不确定 css 网格的最新功能是否真的是这里使用的最佳选择。你可能想看看 flexbox:https://codepen.io/fnocke/details/RxMKOK
或者——甚至更兼容——你确实可以坚持使用正常的 display: block;
。只要指定高度并设置溢出,就可以了。
网格项(.child
)默认给出min-height: auto
。将 min-height: 0
应用于 .child
以否决此。
然后将 height: 100%
添加到 .child-grid
并将 overflow: auto
添加到 content
...
.site,
body,
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;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="child-grid">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
</div>
这是一个快速简单的解决方案,无需更改您的 HTML。只需将此添加到您的代码中:
.child {
overflow: auto;
}
这会覆盖网格项目的 min-height: auto
默认设置,允许它们缩小到其内容的大小以下并创建溢出条件。
这里有完整的解释:
.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: aqua;
grid-area: nav;
}
.child {
grid-area: child;
overflow: auto; /* NEW */
}
.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;
}
* {
box-sizing: border-box;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="child-grid">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
</div>
或者,而不是你这里的:
.parent-grid {
display: grid;
height: 300px;
grid-template-rows: 30px 1fr;
}
试试这个:
.parent-grid {
display: grid;
grid-template-rows: 30px 270px;
}
.content {
overflow: auto;
height: 100%;
}
我还删除了一个似乎没有必要的额外容器 (.child-grid
)。
.site,
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.parent-grid {
display: grid;
height: 300px;
width: 300px;
grid-template-rows: 30px 270px;
grid-template-columns: 1fr;
grid-template-areas: 'nav' 'child';
background-color: grey;
}
.nav {
background-color: aqua;
grid-area: nav;
}
.child {
grid-area: child;
}
.content {
background-color: red;
overflow: auto;
height: 100%;
}
* {
box-sizing: border-box;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
我正在尝试让子 CSS-grid 尊重父网格的尺寸。我怎样才能做到这一点?
我最初是这样写的:
.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;
}
* {
box-sizing: border-box;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="child-grid">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
</div>
我想让 'content' 成为一个不会扩展父级高度的可滚动区域(因此它应该是“270px”)。
好吧,给你的子网格一个专用的高度:
height: 240px;
并设置
overflow: auto;
所以,确实,身高是有保障的。如有必要,将出现滚动条。 不确定 css 网格的最新功能是否真的是这里使用的最佳选择。你可能想看看 flexbox:https://codepen.io/fnocke/details/RxMKOK
或者——甚至更兼容——你确实可以坚持使用正常的 display: block;
。只要指定高度并设置溢出,就可以了。
网格项(.child
)默认给出min-height: auto
。将 min-height: 0
应用于 .child
以否决此。
然后将 height: 100%
添加到 .child-grid
并将 overflow: auto
添加到 content
...
.site,
body,
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;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="child-grid">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
</div>
这是一个快速简单的解决方案,无需更改您的 HTML。只需将此添加到您的代码中:
.child {
overflow: auto;
}
这会覆盖网格项目的 min-height: auto
默认设置,允许它们缩小到其内容的大小以下并创建溢出条件。
这里有完整的解释:
.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: aqua;
grid-area: nav;
}
.child {
grid-area: child;
overflow: auto; /* NEW */
}
.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;
}
* {
box-sizing: border-box;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="child-grid">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>
</div>
或者,而不是你这里的:
.parent-grid {
display: grid;
height: 300px;
grid-template-rows: 30px 1fr;
}
试试这个:
.parent-grid {
display: grid;
grid-template-rows: 30px 270px;
}
.content {
overflow: auto;
height: 100%;
}
我还删除了一个似乎没有必要的额外容器 (.child-grid
)。
.site,
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.parent-grid {
display: grid;
height: 300px;
width: 300px;
grid-template-rows: 30px 270px;
grid-template-columns: 1fr;
grid-template-areas: 'nav' 'child';
background-color: grey;
}
.nav {
background-color: aqua;
grid-area: nav;
}
.child {
grid-area: child;
}
.content {
background-color: red;
overflow: auto;
height: 100%;
}
* {
box-sizing: border-box;
}
<div class="parent-grid">
<div class="nav">Sidebar</div>
<div class="child">
<div class="content">
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
</div>
</div>
</div>