Question

下面的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>

Answer 1

将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
}

Answer 2

我看到的问题是纸张的绝对位置，因为绝对位置不会影响环绕元素的高度（在您的情况下是身体）。如果可能，请尝试position: relative;。然后您的保证金可以计入。见https://jsfiddle.net/y3mg5zvb/

如果由于任何原因它必须是绝对的，你需要一个具有相对或静态定位的周围div来设置身体的高度。

Answer 3

<!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>

这对你有帮助吗？

Answer 4

只是不要在company1上使用绝对位置 - 没有理由这样做。将.Sheet和top替换为left和margin-top，并使用至少与页脚一样高的margin-left。

margin-bottom

Answer 5

我认为这是一个完美的解决方案!!!

乔伊的解决方案，由Nik改编 Set position absolute and margin

<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->

<!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 {
      text-align: right; }

   .Footer {
      position: fixed;
      bottom: 0;
      left: 0px;
      height: 30px;
      width: 100%;
      background: orange; }

   .Sheet {
      position: absolute;
      top: 200px;
      left: 25px;
      width: 50%;
      background: red; }

   .Sheet::after {
      position: absolute;
      content: "";
      bottom: -80px;
      height: 80px;
      width: 1px; }

</style>
</head>

<body>

<div class="Background">
   Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>

<div class="Sheet">
   Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
   Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
   Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
   Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>

<div class="Footer">
   Footer</div>

</body>
</html>

Answer 6

* {
  margin: 0;
  padding: 0;
}

main {
  z-index: 999;
}

footer {
  width: 100%;
  min-height: 40px;
  background-color: black;
}

footer p{
  color: white;
}

<body>

  <main>
    <p>david</p>
  </main>
  
  <footer>
    <p>logo</p>
  </footer>
</body>

尝试使用z-index和一些

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

6 个答案: