将div高度按比例缩放到视口大小

Question

首先，我是一个完全的新手。请像教3岁孩子一样回答。

我知道这个问题以前已经被问过了，但是之前的问题中列出的所有解决方案似乎对我都不起作用。我确定是我做错了什么，但我想不出来。

我正在使用Matthew James Taylor的3列Holy Grail布局。http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm （感谢他的贡献和支持！）

查看源代码，您可以看到他用于创建页面的div结构，我的与其完全相同。我正在尝试使“.col2”（在css中为“.holygrail .col2”）调整为视口减去标题和页脚的大小。

我已经尝试了在这些问题中列出的解决方案。 调整浏览器大小时调整div大小 如何在窗口大小调整时更改div高度？ 我意识到那些解决方案使用了jquery，并且我已经在我的页面上打开了它。压缩版本位于主目录中。

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

以上对我似乎没有用。

我没有尝试调整页头/页脚，只是试图调用元素，但没有成功。我无法调用任何div，不确定问题出在哪里。

我一直无法成功地调整解决方案以适应我的需求。再次确认这可能是些小问题，但非常感谢您给予的帮助。

- Clueless

Answer 1

做类似这样的事情：http://jsfiddle.net/chanckjh/mjQs9/

JQuery：

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

- Chanckjh

---

对不起，我不理解你在建议我如何实现这个的方式，因为我是一个新手。在你的示例中，我只需将“.window”更改为我的“.col2”并使用你的jquery示例吗？还是我要像fiddle中所示一样创建一个类，然后怎么做呢？把它放到我想要调整大小的div中吗？非常抱歉，感谢你的帮助 :) - Clueless

$('.class') 这是你想要选择的元素。 - Chanckjh

是的!!! 非常感谢，我已经为此苦苦挣扎了几个小时。再次感谢!! - Clueless

没有问题。只需点击绿色复选标记，表示这是答案。 - Chanckjh

哎呀，现在完成了。我太兴奋了，一下子就开始编码了。再次感谢。 - Clueless

Answer 2

你必须在不同的<script>标签中引用外部脚本和内联脚本。

<script src="jquery.js"></script>

<script>
    $(window).resize(function() {
        $('.col2').css('height', window.innerHeight + 'px');
    });
</script>

请参阅http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1以获取更多信息。

脚本可以在SCRIPT元素的内容中定义，也可以在外部文件中定义。如果未设置src属性，则用户代理必须将元素的内容解释为脚本。如果src具有URI值，则用户代理必须忽略元素的内容并通过URI检索脚本。请注意，charset属性是指由src属性指定的脚本的字符编码；它不涉及SCRIPT元素的内容。

- rlemon

---

我按照你说的修改了脚本开头，但似乎没有任何效果。我猜想我仍然做错了其他事情。 - Clueless