get bottom of screen position

问题

I want to use jQuery or some other framework to get the bottom of the screen so when a smart banner shows up on the mobile application it modifies the screen to fit to the bottom, regardless of the banner. Is there a simple way to accomplish this?

回答1:

If I understood your question correctly, you are willing to have container height as much the viewport. Let's do this by an example. Assume that you have a main div container which surrounds everything else, a p tag to show the current size of container for display purpose, and an button to show and hide banner:

HTML

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

To change the height of container according to the height of window, we can do this in jQuery:

$(document).ready(function() {

  heightResize($(".container"));

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

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

Then, the code to show/hide the banner and to change the height of container accordingly:

$("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());
  }

});

When banner is added dynamically, height of container will grow more than height of window for as much as the height of banner.

Check out a working example in CODEPEN

来源：https://stackoverflow.com/questions/35210767/get-bottom-of-screen-position