在下面的示例中 - navbar
是 27px
高度,top
是 auto
高度;
问题 - 如果我在 story
中有一些内容 - 滚动不起作用。它变成了 - 内容高度?
如何设置 story
高度 - 作为从 divtop
到屏幕底部的整个剩余空间,这样滚动条就可以工作了。
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.navbar {
position: sticky;
top: 0;
width: 100%;
background: lightseagreen;
color: white;
height: 27px;
}
.grid {
position: fixed;
top: 27px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
height: calc(100vh - 27px);
grid-column-gap: 9px;
background: silver;
}
.grida,
.gridb {
display: grid;
grid-template-rows: auto 1fr;
background: gold;
}
.divtop {
background: lightgreen;
height: auto;
}
.story {
overflow-y: scroll;
}
<div class='navbar'>NAVBAR</div>
<div class='grid'>
<div class='grida'>
<div class='divtop'>TOP</div>
<div class='story'>STORY</div>
</div>
<div class='gridb'>
<div class='divtop'>TOP</div>
<div class='story'>STORY</div>
</div>
</div>
最佳答案
我只是根据您的网格高度为您的 grida,gridb
类添加了 max-height
。评论以获取更多信息。我希望这个解决方案会有所帮助。
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.navbar {
position: sticky;
top: 0;
width: 100%;
background: lightseagreen;
color: white;
height: 27px;
}
.grid {
position: fixed;
top: 27px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
height: calc(100vh - 27px);
grid-column-gap: 9px;
background: silver;
}
.grida,
.gridb {
display: grid;
grid-template-rows: auto 1fr;
background: gold;
max-height: calc(100vh - 27px);
}
.divtop {
background: lightgreen;
height: auto;
}
.story {
overflow-y: scroll;
}
<div class='navbar'>NAVBAR</div>
<div class='grid'>
<div class='grida'>
<div class='divtop'>TOP</div>
<div class='story'>STORY</div>
</div>
<div class='gridb'>
<div class='divtop'>TOP</div>
<div class='story'>STORY</div>
</div>
</div>
关于html - 如何将网格元素高度设置为其余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55255679/