Detectar disponibilidade de tela

[Omar~ 87]

Olá.... então digamos que eu tenha a seguinte situação:

<div>Exemplo</div>
<div style="position:relative">
  <div style="position:absolute; height:500px; display:none">Caixa</div>
</div>
-----------------------------------------

Então temos uma caxa com 500 pixels de altura e não visível. Alí onde eu coloquei um monte de traço seria um hipótese que fosse o fim da tela ou fim da rolagem de tela atual.

Então pelo javascript eu mudo o atributo display da caixa absoluta para "block", a caixa irá aparecer.

 

Como eu detectaria que não há mais espaço abaixo para exibir-la, mudando seu bottom para top, para que quando não houvesse espaço a baixo para exibir ao invés de mostrar abaixo ela fosse mostrada acima?

 

Motivo:

Eu criei esse seguinte script

https://github.com/Spell-Master/sm-web/tree/master/scripts/SelectOption

Que por sua vez personaliza o combobox de um select.

Spoiler

<select class="select-options">
    <option value="a">Selecione uma opção</option>
    <option value="b">Opção</option>
    <option value="c">Opção</option>
    <option value="d">Opção</option>
    <option value="e">Opção</option>
</select>

<script>
  var select = new SelectOption();
</script>

 

 

 

Mas me veio uma questão e se a pessoa quiser colocar o select logo no final do body? A lista personalizada será mostrada fora da tela.

Lógico ele pode manipular o CSS para correção, mas seria mais interessante se o próprio script pudesse automatizar isso.