边栏高度100％，在浏览器中div的大小发生变化

我的网站出了问题。在左边我有一个侧边栏，旁边有容器。目前，我发现这个javascript函数：边栏高度100％，在浏览器中div的大小发生变化

$（文件）。就绪（函数（）{ $（ “＃侧边栏”），高度（$（文件）.height（））; }）;

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

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

如果我将这些div彼此叠放，侧栏不会自动更改高度。当我将这些div放入容器中时，如何确保侧边栏也在变化高度？我需要循环脚本吗？

希望有人能帮助我。

（PS。我没有页脚在我的网站上，以便侧边栏必须保持对文件的高度。（后台））

来源

2011-11-01 Hans de Vries

好吧，这是两个部分的答案。第一部分是您需要获取浏览器视口的高度。第二部分是，当窗口调整大小时，您需要重新执行此功能。经过一些测试（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()); 
});

来源

2011-11-01 14:52:08 csharphacker

它仍然不起作用。我在里面粘贴了这段代码，但是当把这些可拖动的盒子放在容器内时，#sidebar div仍然没有拉伸高度。它具有浏览器整个窗口的高度，但是如果容器div变高，我会看到滚动并看到#sidebar保持不变。 –

我现在修复了这个问题。我用另一种方式来设置边栏的高度始终为100％。

对于谁想让人们知道我是如何解决这个：

我给#sidebar风格：位置：固定;并将div放在div外侧的侧边栏中，并制作了一个新的div #sidebarcontent。然后给了#sidebarcontent风格位置：绝对;并把它们放在正确的地方。我测试了这个跨浏览器，甚至在IE6上也能正常工作。

来源

2011-11-02 10:36:36

边栏高度100％，在浏览器中div的大小发生变化

回答

相关问题