html - 使容器略高于页脚

Question

我有一个主要包含固定宽度(所以不是 100%)的页面所有内容的容器，底部有一个页脚，它是 width:100%。

我想让容器的那部分超出页脚，这就是我带来的:
https://jsfiddle.net/84weu9nz/

这样做，您会注意到，由于 z-index，页脚内容不再可点击或可选择。我可以将容器设置为具有相对位置，例如 https://jsfiddle.net/rLmuq2of/ ，但该解决方案的问题是我无法在 position:relative 元素内制作页面的全部内容，该元素内的某些弹出窗口或某些功能可能会出现意外行为，因此我不'认为这是一个很好的做法。

有什么解决办法吗？谢谢。

Answer 1

我能想到的一个解决方案是对指针事件使用 css 规则，只要您在主元素中没有任何可点击的内容:

main {
  pointer-events: none;
}

如果您的主元素中有可点击元素，那么您必须扩展规则:

main {
  pointer-events: none;
}
main * {
  pointer-events: all;
}

示例

main {
  position: relative;
  background-color: red;
  width: 400px;
  margin: 0 auto;
  pointer-events: none;
}

main * {
  pointer-events: all;
}

footer {
  background-color: green;
  padding-top: 20px;
  margin-top: -20px;
}

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <a href="#">clickable element</a> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</main>
<footer>
  <li><a href="#">#1</a></li>
  <li><a href="#">#2</a></li>
  <li><a href="#">#3</a></li>
</footer>