javascript - (CSS) Div をブラウザーの右下隅の近くに配置する方法は、ブラウザーのサイズに対して相対的ですか?

Question

この画像を見てください：

div を使用して、ブラウザーの右下隅に近いダイアログ ボックスを作成したいと考えています。フッターは固定されており、その高さは 50px で、ダイアログ ボックスの Div は、図に示すように、フッターのすぐ上にあり、ブラウザーの右下隅にあります。

注: 必要条件は、その Div がブラウザーのサイズに対して望ましい位置になければならないということです。これは、ユーザーがブラウザを拡張するために縮小すると、div も移動することを意味しますが、div がどのように移動されても、図に示すように常に目的の位置にある必要があります。

では、CSS でそれを行うにはどうすればよいでしょうか。

Answer 1

実際のデモ: jsFiddle

あなたのHTMLは

<div class="div1">
    <div class="div2">
    </div>
</div>

CSSで

.div1{
   width: 100%;
   height: 500px; 
   border: 1px solid black; 
   position: relative 
}
.div2{
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 25%; 
    height: 100px; 
    border: 1px solid black;
}

Answer 2

これが人を助けることを願っています、

<div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
</div>

例: フィドル

Answer 3

position:fixedブラウザのビューポートを基準にして要素を配置します。

.CLASS_OF_DIALOG_DIV {
    position: fixed;
    right: 0;
    bottom: 50px;
}

ただし、フッターにも がない場合はposition:fixed、ダイアログに対して適切な位置にありません。

また、フッターにがposition:fixedある場合、ブラウザー ビューポートの下部に到達する (または通過する) ページ コンテンツが見えなくなります。

Answer 4

cssを使用する必要があります

#dialog{
    position:fixed;
    bottom:50px;
    right:0px;
}