在下面的示例中-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>
我只是根据您的网格高度max-height
为您的grida,gridb
班级添加了。评论以获得更多信息。我希望此解决方案会有所帮助。
* {
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句