html - 无论是否溢出，都将子 div 固定在其父级中

Question

我试图让一个子 div 相对于“div 窗口”固定在其父 div 的底部；即，无论用户是否滚动，我都希望子 div 保持固定在 div 的底部。

当没有内容溢出时，我可以使用以下方法实现此目标:

HTML:

<div id="outer">
    <div id="inner"></div>
</div>

CSS:

#outer {
    position: relative;
    overflow-y: scroll;
    color: red;
}

#inner {
    bottom: 0;
    position: absolute;
    color: blue;
}

结果是这样的:

当 #outer 的内容时我遇到了问题溢出并且用户滚动:

JS Fiddle of Image #2 (overflow using <br> ) .

这就是我的问题:我想要 #inner (蓝色框)保持固定在 #outer 的底部(红色框)不考虑滚动——类似于使用 position:fixed 的效果在具有 height:100% 的 div 上.但是我想使用设置高度不是 100% 的 div 来实现效果。

我觉得有一个非常简单的解决方案，但我想不出来。

Answer 1

如果添加第二个外层 <div>您可以绝对定位在该元素内而不是滚动 <div> , 如果 #outter div 静态定位:http://jsfiddle.net/Kgf8a/1/

---

或者，您可以考虑使用 position:sticky : http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

但我不知道你会为此获得什么样的浏览器支持。