[英]Hiding content behind action bar
我试图让内容在滚动时隐藏在操作栏后面。
我有这个示例笔: https://codepen.io/Wocha/pen/ExKVNRW
HTML:
<div class="app-content">
<div class="main-content">
<div class="content">
Some main content
</div>
<div class="footer">
Footer content
</div>
</div>
</div>
CSS:
body {
background: #F2F3F5;
}
.app-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
padding: 0;
margin-top: 60px;
}
.main-content {
width: 100%;
margin: 0;
padding-left: 16px;
padding-right: 16px;
}
.content {
background: #fff;
padding: 16px;
min-height: 82vh;
width: 100%;
margin-bottom: 25px;
}
.footer {
display: block;
position: sticky;
bottom: 15px;
width: 100%;
color: #fff;
background: #000;
padding: 10px;
margin-top: 20px;
}
我想要的是滚动时内容隐藏在页脚/操作栏后面,以便在页脚和内容之间总是有一条可见的背景灰色小线。
我可以通过设置内容高度和溢出来做到这一点:自动,但这会为内容 div 创建额外的滚动条,我希望它在滚动主 window 时工作。
这篇文章非常接近我想要发生的事情,但是操作栏只是滚动内容,就像我的笔示例一样。
固定操作栏,考虑页脚
将操作栏的 z 索引更改为 1
z-index: 1;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.