how to set height vs window size

how to set height vs window size

So I have a dialog which pops up and contains a random amount of data pushing the container down below the window. The main page contains a random amount of information. A fix of this is to fix the dialog and have it set to 80% height of the window. The problem is, when the data is smaller than 80%, there is empty space between the last line of data and the bottom of the dialog. My question is, is there a way to set the dialog height to auto, but if the data pushes the container to within 20% of the bottom window, have it be fixed so that there is always a 20% difference between the window bottom and the dialog bottom ( in which the user scrolls in the dialog to see the rest of the data ). 

 <div class="ui-dialog"> <div class="ui-content"> data </div> </div> .ui-dialog { width: 800px; height: auto; position: fixed; display: block; left: 10%;} .ui-content { overflow: auto; }
    if($((('.ui-dialog').height()) < ((window).height('80%')))){
        $('.ui-dialog').css('height','auto');
    };