Question

First off, I am a complete noob. Please respond as if teaching this to a 3yr old.

I know this has been asked before but all of the solutions listed in the previous questions don’t seem to work for me. I’m sure its something I am doing wrong but I can’t figure it out.

I am using the 3column Holy Grail layout by Matthew James Taylor. http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm
(props and thanks for this!)

Viewing source you can see the div structure he used to create the page, mine are identical. I am trying to make it so that “.col2″(“.holygrail .col2” in the css) is resized to the viewport minus(-) header&footer.

I have tried using solutions listed in these questions.

Resize div on browser resize

How to change height div on window resize?

I realize those solutions are using jquery and I did open it on my page. The compressed version is in the home folder.

<script src="jquery.js"></script>
<script>
$(window).resize(function() {
$('.col2').css('height', window.innerHeight+'px');
});
</script>
</body>

The above does not seem to work for me.
I have not tried to adjust it for the header/footer, just tried to call the element, and have had no such luck. I can’t seem to call any div, not sure what is wrong.

I have had no luck adapting solutions to fit my need. Again I am sure its something silly, but a little help is greatly appreciated.

Answer 1

do something like this: http://jsfiddle.net/chanckjh/mjQs9/

jquery:

$(function() {
    var $height = $(window).height();
    $('.window').css('height', $height +'px');
});​