获取屏幕位置的底部

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的工作示例