javascript - Css float：right 100％高さ、画像は下に揃えます

Question

float: right私のウェブサイトでを使用しています。そのdivをウィンドウの高さから10pxのマージンを引いた100％にしたい。高さをページに合わせてサイズ変更したい。

また、その中の画像を「コンテナ」から10pxのパディングを引いた下部に配置する必要があります。

私はすべてを調整しようとしましたが、コード内の何かが競合していると確信していますが、うまくいきません。

事前にご提案ありがとうございます。

Answer 1

これには、フローティングではなく絶対ポジショニングを使用することをお勧めします。たとえば、設定すると同時に要素を拡張することができtopますbottom。

bottomに設定すると、画像に対して絶対配置も機能する可能性があります（デフォルト以外の要素は要素をオフセット親にする10pxため、オフセット親はすでに正しいコンテナになります）。positionstatic

簡単な例：

/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }

jsFiddleデモ

<strong> UPDATE：および更新されたjsFiddleは、コンテナに別の要素を配置して下部に配置する例を示しています。

#image { position: absolute; bottom: 10px; left: 20px;  }