How do I refresh CSS after javascript runs to adjust div height - html

Question

I'm using the following script to adjust the height of a container div on my page relative to the browser window's height
function thirty_pc() {
var height = $(window).height();
var thirtypc = (50 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
var thirtypc2 = thirtypc * 2;
$("#slider").css('height',thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
The script works fine to scale the #slider div's height relative to the viewport's height. The problem is if I resize the browser window the inside div elements dimensions get distorted. However if I refresh the browser the inside div elements fix themselves. Also if I go into firebug while the inside div's are distorted and I un-check ANY even unrelated elements CSS properties, the inside div's fix themselves.
Would the solution be for javascript to somehow refresh CSS after a browser re-size? If so how do you do that? Or should I be tying in the effected inside div element's dimensions to the function to begin with? I have also tried to do that with no luck.
The fact that a browser or CSS refresh seems to fix the problem makes me lean towards the first solution if it's possible.
Thanks.

Answer 1

First off, I suggest you make a text space... a simplified version to learn with. Here is a jsFiddle as an example how you can make an example that doesn't have all the other site stuff in the way. CSS is read once. the js is writing inline CSS. So you don't want to refresh the CSS. You want to write new inline CSS over the stuff the js already wrote.
Here is an example of a function. Below is how you call it on DOM ready and then, also when the window is resized. Keep in mind that it is going to run that function many many many times while you resize - so this isn't great for all scenarios. Also, - while it's commendable that you want it to resize(I do the same) no one else is going to resize their browser... So pick your battles.
var your_functions_name = function() {
var windowHeight = $(window).height();
$('.box').css('height', windowHeight/2);
};
// run on document ready
$(document).ready(your_functions_name);
// run on window resize
$(window).resize(your_functions_name);