javascript - Keeping fixed footer and header from overlapping -

i got code right , made fixed header , footer template working on, , re sizes according window size fine. there way keep header , footer touching each other when resize window. header 190px high , footer 134px high. need when position of footer 190px top of page prevent going higher

need this:

if(window_size_height = 325px){ stop resizing!} 

or

if(footer 325px top){ footer_y_position cannot go higher} 

here sample test

http://jsfiddle.net/kyyb7/

edit:

$(window).resize(function(){    if($(window).height() < 435+$('#header').height()){     $('#footer').css('position','relative'); } else {     $('#footer').css('position','fixed'); } }); 

what can either use css3 media queries mentioned or can use javascript / jquery.

this way in jquery:

$(window).resize(function(){        if($(window).height() < 325){         $('#footer').css('position','relative');     } else {         $('#footer').css('position','fixed');     } });