8

我正在尝试通过从窗口大小中减去页眉和页脚值并将内容设置为文档加载时的此值来动态设置网页内容的高度。

每个函数参数都接受一个元素 id 以获取元素高度；不包括内容参数。

 function setH(header, content, footer) 
{
    winH = top.innerHeight;
    winTitle = 32; // height value of the window title (part of the header)
    headH = $(header).outerHeight(true);
    footH = $(footer).outerHeight(true);
    contentH = winH - winTitle - headH - footH;
    $(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'});
}

我遇到的问题是 outerHeight 值返回了错误的值。页眉返回 23 像素，页脚返回 40 像素。

检查 FF 和 Chrome 中的元素时，值是 25px 和 44px。

我尝试使用 innerHeight、outerHeight 和 outerHeight(true) 但没有得到正确的值。

关于可能出现问题的任何建议？还是动态设置内容高度的替代方法？我的头发快用完了，所以感谢您的帮助。

编辑：我正在处理 iframe 中的内容。以下内容：winH = top.innerHeight获取最顶部 iframe 窗口的高度值。

4

2 回答 2

17

尝试对我有帮助的一件事是放入检查而不是检查outerHeight()的代码。显然在许多情况下使用 是可以的，但有时不正确的值是由于元素没有完全加载造成的。$(window).load()$(document).ready()$(document.ready()outerHeight()

于 2013-06-23T07:04:14.847 回答
1

我修改了用于计算屏幕宽度/高度的脚本。看看这是否有效：

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth;
        viewportheight = window.innerHeight;
        winTitle = 32;
        headH = $(header).outerHeight(true);
        footH = $(footer).outerHeight(true);
        contentH = viewportheight - winTitle - headH - footH;
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth;
        viewportheight = document.documentElement.clientHeight;
        winTitle = 32;
        headH = $(header).outerHeight(true);
        footH = $(footer).outerHeight(true);
        contentH = viewportheight - winTitle - headH - footH;
    }

    // older versions of IE

    else {

    viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
    viewportheight = document.getElementsByTagName('body')[0].clientHeight;
    }
    document.getElementById("content id").style.height = contentH + "px";
于 2013-03-18T15:19:09.400 回答