獲取屏幕位置的底部

Question

我想使用jQuery或其他框架來獲取屏幕的底部，因此當智能橫幅出現在移動應用程序中時，它將修改屏幕以適應底部，而不管橫幅。有沒有簡單的方法來實現這一點？

Answer 1

如果我正確理解你的問題，你願意容器的高度與視口一樣多。我們通過一個例子來做這件事。假設你有一個主要的div container圍繞一切，一個p標籤顯示的container顯示目的電流的大小，以及button顯示和隱藏banner：

HTML

<div class="container"> 
    Screen size is <p></p> 
    <button type="button">push to add banner</button> 
</div> 

要根據窗口的高度改變container的高度，我們就可以在jQuery的做到這一點：

$(document).ready(function() { 

    heightResize($(".container")); 

    $(window).resize(function() { 
    heightResize($(".container")); 
    }); 
}); 

function heightResize(element) { 
    element.height($(window).height()-20); 
    $("p").text(element.height()); 
} 

然後，代碼顯示/隱藏旗幟，改變container相應的高度：

$("button").click(function() { 

    if ($(".container").find(".banner").length != 0) { 
    $(".container").find(".banner").remove(); 
    heightResize($(".container")); 
    } else { 
    $(".container").append("<div class='banner'>this is your dynamically created banner</div>"); 
    $(".container").height($(".container").height()+$(".banner").height()); 
    } 

}); 

當banner動態添加，的container高度增長將超過的window高度更之多的高度banner。

查看CODEPEN的工作示例