HTML / CSS:内容位于固定的页脚下方

new*_*ver 6 html css

下面的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; }
Run Code Online (Sandbox Code Playgroud)

的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>
Run Code Online (Sandbox Code Playgroud)

Gab*_*ino 0

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<style type="text/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; 
      max-height: 500px;
      overflow: scroll;
      top: 45px;
}

</style>
</head>


<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>
</html>
Run Code Online (Sandbox Code Playgroud)

这对你有帮助吗?