javascript - jquery-.height（）を使用

Question

jquery .height（）を使用してドキュメントの高さを取得しています。

こちらをご確認ください http://jsfiddle.net/rkumarnirmal/86q37/

高さを取得した後、要素をその位置に配置します。ドキュメントの高さが領域を超えているため、ドキュメントの高さが実際に間違っていることがわかります。

どうすればこれを解決できますか？

ありがとう！

Answer 1

はtop#dummyの上部を基準にしています。

したがって、ページの高さから#dummyの高さを引く必要があります。

$(function(){
    var h = $(document).height() - $("#dummy").height();
    $("#dummy").css("top", h+"px");
})​

ただし、これは純粋なCSSで実行できます。

http://jsfiddle.net/86q37/3/

ただし、古いブラウザをサポートしたい場合は、CSSのトリックを調べてそれを行うか、JSに固執する必要があります。

Answer 2

.height正しい値を返しています。ただし、ボックスの上部の位置をドキュメントの高さに設定しています。理解を深めるために、以下のデモを参照してください。

$(function(){
    var h = $(document).height();
    $("#dummy").css("top", function () {
        return (h - $(this).height()) +"px"; 
      //This will place the box at top position subtracting 
      //the documentHeight - dummyHeight;
    });
})

デモ

Answer 3

1 つの解決策は、jQuery を使用して、要素の高さを本体の高さから差し引くことです (高さにを追加することを心配する必要はありませんpx。jQuery はそれを内部で処理します)。

$(function(){
    var h = $(document).height();
    $("#dummy").css("top", h - $('#dummy').height());
})​

JS フィドルのデモ。

簡単な解決策は、単純に CSS を使用することです。

#dummy {
    position: absolute;            
    width: 100px;
    height: 100px;
    bottom: 0; /* aligns the bottom of the element zero pixels from the bottom of the document */
    left: 0; /* aligns the left side of the element zero pixels from the left side of the document */
    background-color: red;
}​

JS フィドルのデモ。