0

ページのメインコンテンツが表示される div (または記事またはセクション..) があります。(株式会社: テキスト、画像、段落など)。

私が欲しいのは、画像の上部をこのdivの下部に配置したいということです。しかし：

DIV の高さがブラウザ ウィンドウの高さよりも長い場合、この画像を位置ビューポートの下部に配置して、常にユーザーに表示されるようにします。

DIV の高さがブラウザー ウィンドウのビューポートよりも短い場合、この画像を DIV の下端がある場所に配置する必要があります。

元。1- DIV はビューポートよりも長いため、下の画像はビューポートの下部に固定されます

画像は -> ... で表されます。

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

元。2- DIV はビューポートよりも短いため、下部の画像は DIV の下部に固定されます

画像は -> ... で表されます。

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

もちろん、これは JavaScript で実現できます。しかし、代わりに、追加のレイヤー DIV やラッパー、またはその他の種類の CSS ポジショニングを使用してこれが達成可能かどうかを調べたいと思います。]

CSS-HTML の方法が不可能な場合、これを実現するために採用するのに最適な JS ロジックは何でしょうか?

1) ロードされたページ: 高さを比較し、それに応じて画像を配置し、スクロールが行われた場合は再計算して再配置しますか?

ありがとうございました。

4

1 に答える 1

1

私は100％確実ではないので、これについて私を引用しないでください.JQueryを使用して、DIVの位置を相対から絶対に動的に変更できるかもしれません。

見えていない場合のようなことを考えています

position: absolute;
bottom: 0px;

そうしないと

position: relative;
bottom:0px;

そうすれば、絶対位置はページの下部に固定されます。それ以外の場合、相対位置は親 div の下部に固定されます。

あなたがフィドルを作成する場合、私（または他の誰か）はあなたのためにこれを少しいじることができます。

それが役立つことを願っています!

于 2012-05-08T15:15:39.667 に答える