视口的 div 高度比例

Question

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

我知道以前有人问过这个问题，但前面问题中列出的所有解决方案似乎都不适用于我。我确定这是我做错了什么，但我无法弄清楚。

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

查看源码可以看到他用来创建页面的div结构，我的一模一样。我正在尝试将“.col2”（css中的“.holygrail .col2”）调整为视口减号（-）页眉和页脚。

我已尝试使用这些问题中列出的解决方案。

Resize div on browser resize

How to change height div on window resize?

我意识到这些解决方案正在使用 jquery，并且我确实在我的页面上打开了它。压缩版本位于主文件夹中。

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

以上似乎对我不起作用。 我没有尝试为页眉/页脚调整它，只是尝试调用元素，并且没有这样的运气。我似乎无法调用任何 div，不知道出了什么问题。

我没有根据自己的需要调整解决方案。我再次确信它有些愚蠢，但非常感谢您提供一点帮助。

Answer 1

您必须在不同的<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 元素的内容无关。

Answer 2

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

jquery：

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