Javascript subtracting pixels from percentage

Question

I am looking to use JavaScript to restyle a div on button click. I have everything working, except one thing. One of the things that I want to do is change the maximum height of the div from what I currently have it set to, to 100% - 12px. I tried using the CSS calc() function, but it didn't work. The strangest thing about this is that when I checked the developer console for errors, it did not throw an error. Does anyone know how to do what I am asking?

Thanks in advance!

Answer 1

I would solve this problem using jQuery by adding a click binding to your button and then getting the height of .parent(). I've demonstrated this in this fiddle http://jsfiddle.net/TGyYv/ .

The key is this code.

$("#button").click(function () {
    parent_height = $(this).parent().height()
    $(this).height(parent_height - 12)
})

When the button is clicked, it gets the parent's height, then sets the button's height to the parent's minus 12!