我试图让一个子 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 来实现效果。
我觉得有一个非常简单的解决方案,但我想不出来。
最佳答案
如果添加第二个外层 <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
但我不知道你会为此获得什么样的浏览器支持。
关于html - 无论是否溢出,都将子 div 固定在其父级中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15646298/