3

我不确定这是否可能：

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

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

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

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

更新

这是一个链接，可以帮助说明我正在尝试做的事情：http: //jsbin.com/ojejad/2/edit

当您向下滚动时，会出现绿色，因为它显然是页面内容的一部分。浏览器是否可以不考虑页面内容的绿色 div 部分，从而使滚动停止在蓝色的底部？

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

4

1 回答 1

11

如果你想让一些东西粘在屏幕上，请使用

position:fixed;

像这样：

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

演示：http: //jsbin.com/owacaq/1/edit

编辑：

如果你想让某些东西坚持它的父母使用

position:absolute;

在要粘贴的元素上和

position:relative;

在父母身上。

绝对位置不尊重任何东西，除了下一个具有静态以外位置的父级。

例子

http://jsbin.com/eceqeh/1/edit

于 2013-07-10T20:51:42.213 回答