Question

我的网站出了问题。在左边我有一个侧边栏，旁边有我的容器。目前我已经找到了这个javascript函数：

$（文件）。就绪（函数（）{ $（“＃sidebar”）。height（$（document）.height（））; }）;

此脚本可确保我的侧边栏为100％。此外，如果我调整屏幕大小，侧边栏会自动更改高度。

问题是我的容器中有一个带有移动div的仪表板，可以改变大小并可以在彼此之下堆叠。（例如：http://demo.webdeveloperplus.com/drag-drop-panels/）

如果我将这些div叠加在一起，侧边栏不会自动改变高度。当我将这些div堆叠在容器中时，如何确保侧边栏也在改变高度？我需要循环脚本吗？

希望有人能帮助我。

（ps。我的网站没有页脚，所以侧边栏必须保持文档的高度。（背景））

Answer 1

好的，这是两部分答案。第一部分是您需要获取浏览器视口的高度。第二部分是，只要窗口调整大小，您就需要重新执行此功能。经过一些测试（在IE 9，Chrome和FF中）我发现这个效果很好：

function getClientHeight() {
    var retval = 0;

    if (typeof (window.innerHeight) == 'number') {
        retval = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        retval = document.documentElement.clientHeight;
    } else if (document.body && document.body.clientHeight) {
        retval = document.body.clientHeight;
    }

    return retval;
}

$(document).ready(function () {
    $(window).resize(function (event) {
        $("#sidebar").height(getClientHeight());
    });

    $("#sidebar").height(getClientHeight());
});

Answer 2

我现在解决了这个问题。我用另一种方法将侧边栏的高度设置为100％。

对于想知道我如何解决这个问题的人：

我给了#sidebar样式：position：fixed;并将div放在div外侧边栏内并创建了一个新的div #sidebarcontent。然后给出了#sidebarcontent风格的位置：绝对;并把它们放在正确的地方。我测试了这个跨浏览器，它甚至在IE6上工作。

边栏高度100％，在浏览器中更改div的大小

2 个答案: