I'm attempting to create a responsive layout where the content div adjusts itself when the user resizes the page. The top and bottom divs are static, so only the content div changes its size based on the page flow.
$(window).resize(function() {
var height = $("#content").height();
newheight = (height-136)+"px";
$("#content").css("height",newheight);
});
function test() {
var height = $("#content").height();
newheight = (height-136)+"px";
$("#content").css("height",newheight);
}
I am subtracting 136px from the height to ensure it fits between the two static divs.
When the page loads, I call the test() function to resize the content div as intended. However, when I try to resize the window using the handles, it shrinks down to only display a few words.
You can view the live page here: spynsycle.com/ttr (Just ignore the temporary green color used for debugging purposes)
Any suggestions or thoughts on this issue?