Changing The TD Height?

I am using a table to help align elements around a page, I would usually be using divs etc but as it is a complicated setup I have chosen to use a table. Anyway on the right hand side of the page I have a column which contains a photo, this td has its position fixed on the screen so when the user scrolls down the page only the gallery td scrolls and the rest remains where it is. However when testing on a smaller screen yesterday I realised that if my td is larger than the monitor or screen then the user cannot scroll down the fixed element. I have therefore come up with the solution of applying 'overflow: auto' to the fixed element. This will only work though if the height of the element is set to the height of the inner page. This is where my script comes in, I need to load the page then change the height of the TD dynamically so that the td can be scrolled down. This is my javascript:

HTML Code:

<script type="text/javascript" language="javascript">
function photoHeight() {
document.getElementById('photo').style.height=window.innerHeight - 59+'px';
}
</script>

Then obviously I have placed 'photoHeight()' into the body onload element.