Clueless Clueless - 3 months ago 7x
HTML Question

Div height scale to viewport

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.
(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>
$(window).resize(function() {
$('.col2').css('height', window.innerHeight+'px');

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.


do something like this:


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