Question

我有一个div（或文章或部分..），其中显示了页面的主要内容。（包括：文字，图像，段落等）。

我想要的是：我希望图像顶部位于此div的底部。但是：

如果DIV的高度比浏览器窗口长，我希望此图像位于位置视口底部，用户始终可以看到它。

如果DIV的高度比浏览器窗口的视口短，那么我希望将此图像放置在DIV底端所在的任何位置。

EX。 1- DIV比视口长，因此底部图像固定在视口底部

图像用 - ＆gt;表示...

==================
=   ______       =
=  |      |      =
=  | DIV  |      = 
=  |      |      =  --> VIEWPORT FRAME
=  |      |      =
=  |...   |      =
==================
   |      |      
   |      |      
   |------|

EX。 2- DIV比视口短，因此底部图像固定在DIV的底部

图像用 - ＆gt;表示...

==================
=   ______       =
=  |      |      =
=  | DIV  |      = 
=  |...   |      =
=  |------|      =
=                =
==================

当然，我可以通过JavaScript实现这一目标。但我想通过使用额外的图层DIV或包装或其他种类的CSS定位来确定这是否可以实现。 ]

如果无法使用CSS-HTML方式，那么最好的JS逻辑是什么才能完成？

1）页面加载：比较高度并相应地定位图像，如果滚动完成重新计算并重新定位？

谢谢。

Answer 1

不要引用我，因为我不是100％肯定，但也许你可以使用JQuery动态地将DIV的位置从相对位置改为绝对位置。

我想的是，如果它不在视野中

position: absolute;
bottom: 0px;

否则

position: relative;
bottom:0px;

这样绝对位置会将其固定在页面底部，否则相对定位会将其固定在其父div的底部。

如果你创造了一个小提琴，我（或其他任何人）可以为你做一些小事。

希望有所帮助！

固定DIV底部的图像定位

1 个答案: