Question

我试图将一个子div固定在其父div的底部，相对于＆＃34; div窗口＆＃34 ;;即无论用户是否滚动，我都希望子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;
}

结果如下：

Image with no problem

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

Overflow using breaks

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

这就是我的问题：我希望#inner（蓝色方框）保持固定在#outer（红色框）的底部而不管滚动 - 与使用{{1在具有position:fixed的div上。但我希望使用设置高度不是100％的div来实现效果。

我觉得有一个非常简单的解决方案，但我无法理解。

Answer 1

如果您添加了第二个首字母<div>，那么如果<div> div静态定位，您可以绝对定位在该元素内而不是滚动#outter：http://jsfiddle.net/Kgf8a/1/

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

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

Answer 2

试试这个

身体上的

标签：

<body onLoad="test();">

javascript文件

function test() {
    document.getElementById("outer").addEventListener ("scroll", bottom);   
}
function bottom(){
  var o = document.getElementById("outer");
  var i = document.getElementById("inner");
  i.style.bottom =  - o.scrollTop;
}

这里是de JSBIN http://jsbin.com/ocijeg/1/edit

无论溢出如何，都在其父级中修复子div

2 个答案: