个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
下面的 html 页面包含一个页脚(位置:固定)和一个“工作表”(position:absolute)。
我的问题:向下滚动时如何防止工作表的底端隐藏在页脚下方？
我对 padding 和 margin 的所有尝试都失败了......(请只使用 html/css 解决方案。)
CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
最佳答案
将 margin-bottom 赋予工作表，等于或大于页脚固定高度；
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
更新如果你想放在前面，那么添加 z-index 属性。
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
关于HTML/CSS : Content goes underneath a fixed footer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41633953/
25
4
0
我是一名优秀的程序员,十分优秀！