Html 您可以创建不作为页面内容滚动的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17580584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you create div that doesn't scroll as page content
提问by Jake Wilson
I'm not sure if this is possible or not:
我不确定这是否可能：
I have a webpage with several div's of content on it, stacked one on top of the other. At the bottom, of all the content div's, I want there to be a 100px tall image (or maybe it's a DIV with a background-image).
我有一个网页，上面有几个 div 的内容，一个叠一个。在所有内容 div 的底部，我希望有一个 100 像素高的图像（或者它可能是一个带有 的 DIV background-image）。
When you view this page, the browser creates scrollbars so that you can scroll down the content but also so you can scroll the bottom div/image into view.
当您查看此页面时，浏览器会创建滚动条，以便您可以向下滚动内容，但也可以将底部 div/图像滚动到视图中。
Are there CSS settings I can use on that bottom div/image so that the browser basically ignores it as content? So that the browser doesn't try to scroll down to it? I can't figure out if this is possible or not.
我可以在底部 div/image 上使用 CSS 设置，以便浏览器基本上将其作为内容忽略吗？这样浏览器就不会尝试向下滚动到它？我不知道这是否可能。
Alternatively, I can make the image part of the <body>background, but then how do I force this image to show up exactly below my content div's? When you change the window size, the height of my content div's change, due to changing content inside of them. So I'm not sure how you can always ensure this bottom image shows up exactly after the last content div if it's a background.
或者，我可以将图像作为<body>背景的一部分，但是如何强制该图像正好显示在我的内容 div 下方？当您更改窗口大小时，由于更改了其中的内容，我的内容 div 的高度也会发生变化。因此，我不确定如何始终确保此底部图像恰好显示在最后一个内容 div 之后（如果它是背景）。
UPDATE
更新
Here is a link that can help illustrate what I'm trying to do: http://jsbin.com/ojejad/2/edit
这是一个链接，可以帮助说明我正在尝试做的事情：http: //jsbin.com/ojejad/2/edit
When you scroll down, the green shows up, because it's obviously part of the content of the page. Is it possible for the browser to not consider the green div part of the page content, so that the scrolling stops at the bottom of the blue?
向下滚动时，绿色显示出来，因为它显然是页面内容的一部分。有没有可能浏览器不考虑页面内容的绿色div部分，让滚动停在蓝色底部？
The reason for this is that I want people to see the green image at the bottom only if their monitor is big enough that they natually see all the blue + the green without having to scroll. But if the user's monitor is too small, I don't want them to scroll to the bottom of the page and continue scrolling just to see this image because it's really supposed to be just a background image and not apart of the important content.
这样做的原因是我希望人们只有在他们的显示器足够大时才能看到底部的绿色图像，他们自然而然地看到所有的蓝色 + 绿色而无需滚动。但是如果用户的显示器太小，我不希望他们滚动到页面底部并继续滚动只是为了看到这个图像，因为它实际上应该只是一个背景图像而不是重要内容的一部分。
回答by user1721135
If you want something to stick to the screen use
如果你想让某些东西粘在屏幕上，请使用
position:fixed;
Like so:
像这样：
div {
background-color:blue;
height:200px;
width:200px;
position:fixed;
bottom:0;
}
Demo: http://jsbin.com/owacaq/1/edit
演示：http: //jsbin.com/owacaq/1/edit
Edit:
编辑：
If you want something to stick to its parent use
如果你想要一些东西坚持它的父级使用
position:absolute;
On the to be sticked element and
在要粘贴的元素和
position:relative;
On the parent.
在父母身上。
Position absolute doesn't respect anything except the next parent with position other than static.
除了静态位置以外的下一个父级之外，绝对位置不尊重任何东西。
Example
例子
