將圖像固定在DIV底部

Question

我有一個div（或文章或section ..），其中顯示了頁面的主要內容。 （包括：文字，圖片，段落等）。

我想要的是：我希望圖像的頂部位於此div的底部。 但：

如果DIV的高度大於瀏覽器窗口的高度，則我希望將此圖像放置在位置視口的底部，用戶始終可以看到該圖像。

如果DIV的高度短於瀏覽器窗口的視口，那么我希望此圖像位於DIV底端的任何位置。

例如 1- DIV長於視口，因此底部圖像固定在視口的底部

圖像用-> ...表示

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

例如 2- DIV比視口短，因此底部圖像固定在DIV的底部

圖像用-> ...表示

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

我當然可以用JavaScript來實現。 但是，我想找出是否可以通過使用額外的層DIV或包裝器或其他類型的CSS定位來實現。 ]

如果無法通過CSS-HTML方式實現此目標，那么最佳的JS邏輯將是什么？

1）已加載頁面：比較高度並相應地定位圖像，如果滾動完成了重新計算並重新定位？

謝謝。

Answer 1

不要在此引用我的信息，因為我不確定100％，但是也許可以使用JQuery動態將DIV的位置從相對更改為絕對。

我在想什么，如果它不在視野中

position: absolute;
bottom: 0px;

其他

position: relative;
bottom:0px;

這樣，絕對位置會將其固定在頁面底部，否則相對位置會將其固定在其父div的底部。

如果您制作小提琴，那么我（或其他任何人）可能會為您做些小嘗試。

希望有幫助！