我有一个 div(或文章或部分..)，其中显示了页面的主要内容。 (包括:文本、图像、段落等)。
我想要的是: 我希望图像顶部位于此 div 的底部。但是:
如果 DIV 的高度比浏览器窗口长，我希望该图像位于位置视口(viewport)的底部，用户始终可以看到它。
如果 DIV 的高度比浏览器窗口的视口(viewport)短，那么我希望将此图像定位在 DIV 底端所在的位置。
例如。 1- DIV 比视口(viewport)长，所以 basemap 固定在视口(viewport)底部
图像用 -> ... 表示
==================
= ______ =
= | | =
= | DIV | =
= | | = --> VIEWPORT FRAME
= | | =
= |... | =
==================
| |
| |
|------|
例如。 2- DIV 比视口(viewport)短，所以 basemap 固定在DIV 的底部
图像用 -> ... 表示
==================
= ______ =
= | | =
= | DIV | =
= |... | =
= |------| =
= =
==================
当然，我可以用 JavaScript 实现这一点。但我想知道这是否可以通过使用额外的层 DIV 或包装器或其他类型的 CSS 定位来实现。 ]
如果 CSS-HTML 方式不可能，那么最好的 JS 逻辑是什么？
1) 页面加载:比较高度并相应地定位图像，如果滚动完成，重新计算并重新定位？
谢谢。
最佳答案
不要引用我的话，因为我不是 100% 确定，但也许您可以使用 JQuery 动态地将 DIV 的定位从相对更改为绝对。
我在想，如果它不在视野中
position: absolute;
bottom: 0px;
其他
position: relative;
bottom:0px;
这样绝对定位会固定在页面底部，否则相对定位会固定在其父 div 的底部。
如果您创建了一个 fiddle ，我(或其他任何人)可以为您尝试一下。
希望对您有所帮助!
关于javascript - 图像在 DIV 底部的固定定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10501315/