Detectar disponibilidade de tela

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.