html - 你能创建不作为页面内容滚动的div吗

我不确定这是否可能:

我有一个网页，上面有几个 div 的内容，一个叠在另一个上面。在所有内容 div 的底部，我希望有一个 100px 高的图像(或者它可能是一个带有 background-image 的 DIV)。

当您查看此页面时，浏览器会创建滚动条，以便您可以向下滚动内容，也可以将底部的 div/图像滚动到 View 中。

我是否可以在底部的 div/图像上使用 CSS 设置，以便浏览器基本上将其忽略为内容？这样浏览器就不会尝试向下滚动到它？我不知道这是否可能。

或者，我可以将图像作为 <body> 的一部分背景，但我如何强制此图像显示在我的内容 div 的正下方？当您更改窗口大小时，我的内容 div 的高度会发生变化，因为它们内部的内容发生了变化。所以我不确定如果它是背景，您如何始终确保这个底部图像恰好显示在最后一个内容 div 之后。

更新

这里有一个链接可以帮助说明我正在尝试做什么:http://jsbin.com/ojejad/2/edit

当您向下滚动时，绿色会出现，因为它显然是页面内容的一部分。会不会是浏览器没有考虑页面内容的绿色div部分，导致滚动停在蓝色底部？

这样做的原因是我希望人们只有在他们的显示器足够大以至于他们无需滚动就能自然地看到所有蓝色 + 绿色时才能看到底部的绿色图像。但是如果用户的显示器太小，我不希望他们滚动到页面底部并继续滚动只是为了看到这张图片，因为它实际上应该只是背景图片而不是重要内容的一部分。

最佳答案

如果你想让东西粘在屏幕上使用

position:fixed;

像这样:

div {
  background-color:blue;
  height:200px;
  width:200px;
  position:fixed;
  bottom:0;
}

编辑:

如果你想让某物坚持其父用途

position:absolute;

在要粘贴的元素上

position:relative;

在 parent 身上。

绝对位置不考虑任何东西，除了具有非静态位置的下一个父级。

例子

关于html - 你能创建不作为页面内容滚动的div吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17580584/