Se a div
estiver posicionada no topo do body
o cálculo p/ encontrar essa distância é altura do body
menos a altura da div
, logo, se a div
estiver em outro lugar como na imagem que tu apresentou na pergunta, o cálculo será, a altura do body
menos a altura da div
mais a distância que ela está do topo do body
que pode facilmente ser obtida através do offset().top
, o resultado será a distância entre a parte de baixo da div
e parte de baixo do body
.
*Nota que o valor está quebrado por causa da borda em ambos elementos.
$(document).ready(function() {
var alturaBody = $("body").height();
var alturaDiv = $("#divA").height();
var offsetTop = $("#divA").offset().top;
console.log("Altura do body: "+alturaBody);
console.log("Altura da div: "+alturaDiv);
var espacoEntre = alturaBody - (alturaDiv + offsetTop);
console.log("Dist. entre div e body: "+espacoEntre);
});
body {
border: 1px solid red;
height: 500px;
}
#divA {
border: 1px solid black;
height: 100px;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="divA">
<div>
<body>