CSS / jQuery: limit dropdown max-height to screen height -

i have html page needs show lot of content in dropdowns in navbar on top leads of dropdowns exceed screen height when opening them. use bootstrap 3 , have own dropdowns created using unordered list (<ul>) tags.

if apply following css resolves issue , gets me vertical scrollbar want in case. problem here max-height fixed value. note: need able support ie8 , ie9.

is there way use css or jquery set screen height (or bit less) max-height adjusts if screen height changes, esp. support smaller screens ?

my css:

<ul class="dropdown-menu" style="max-height:300px; overflow:auto"> 

many this, tim.

this set list's height not overflow screen.
try this:

$(function(){     $(window).resize(function(){         $('ul').css('max-height', ($(window).height() - $('ul').offset().top) + 'px');     }); });