Html / CSS：内容位于固定的页脚下方

2023年3月3日 217次阅读

下面的html页面包含一个页脚(位置：固定)和一个“工作表”(位置：绝对).

我的问题：当我向下滚动时,如何防止工作表的底端隐藏在页脚下方？

我所有的填充和边距尝试都失败了…(请仅使用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>

最佳答案 给页边距底部等于或大于页脚固定高度的页边;

.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
}
点赞