Question

这个问题很难解释。我有一个固定的页脚，顶部有10px的边框。我需要10px边框来阻止页面内容，如文本和图像，只显示下面内容的背景颜色。

有办法做到这一点吗？我使用bootstrap。

div.customfooter {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 500;
  height: 100px;
  background-color: green;
  border-top: 10px solid transparent;
}

编辑：整个页面内部内容的背景颜色发生变化

Answer 1

使用z-index堆叠div：s。通常你需要至少2个div才能堆叠它们。你基本上需要添加另一个div并将该div设置为相对位置并添加z-index。您计划拥有的div＆＃34; on-top＆＃34;应具有最高的z指数值。

见下面的代码片段：

＆＃13;

.footer {
position: fixed;
z-index: 2;
background-color: black;
height: 50px;
width: 100%;
}

.content {
position: relative;
z-index: 1;
background-color: red;
height: 80px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div class="footer"></div>
<div class="content">
1<br /><br />
2<br /><br />
3<br /><br />
4<br /><br />
5

</div>

  
</body>
</html>

＆＃13;

Answer 2

假设您的最新更新我建议遵循：

1）减少保证金：通过执行此操作，您将在滚动期间看到背景颜色。减少“div.customfooter”的保证金，值为：

 margin-left: 10px; 

 margin-right: 10px;

2）身体调整：如果你需要背景来反映你的您需要将主体设置为边距的黑色：0

添加：

body {
margin: 0;
}

固定页脚 - 如何阻止页面内容但显示背景颜色？

2 个答案: