0

我试图让子 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（溢出使用<br>）。

这就是我的问题：无论滚动如何，我都希望#inner（蓝色框）保持固定在#outer（红色框）的底部——这种效果类似于position:fixed在具有height:100%. 但我想使用设置高度不是 100% 的 div 来实现效果。

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

4

2 回答 2

1

如果添加第二个外部元素，则<div>可以在该元素内绝对定位而不是滚动<div>，如果#outterdiv 是静态定位的：http: //jsfiddle.net/Kgf8a/1/

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

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

于 2013-03-26T20:06:45.083 回答
0

尝试这个

身体标签：

<body onLoad="test();">

文件

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;
}

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

于 2013-03-26T20:36:22.320 回答