侧边栏高度 100% 随着浏览器中 div 大小的变化

发布于 2024-12-13 00:46:02 字数 530 浏览 0 评论 0原文

我的网站出现问题。 左侧有一个侧边栏,旁边有容器。 目前我找到了这个 javascript 函数:

$(document).ready(function(){ $("#sidebar").height( $(document).height() ); });

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

问题是我的容器中有一个带有移动 div 的仪表板,它们可以更改大小并且可以堆叠在彼此下面。 (示例:http://demo.webdeveloperplus.com/drag-drop-panels/)

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

希望有人能帮助我解决这个问题。

(注:我的网站中没有页脚,因此侧边栏必须保持文档的高度。(背景))

I got a problem with my website.
On the left I have a sidebar, and next to it I have the container.
At the moment I have found this javascript function:

$(document).ready(function(){
$("#sidebar").height( $(document).height() );

});

This script makes sure that my sidebar is 100%. Also if I resize the screen, the sidebar automatically changes height.

The problem is that I have a dashboard in my container with moving divs, who can change size and are stackable underneath each other. (example: http://demo.webdeveloperplus.com/drag-drop-panels/)

If I stack these divs underneath each other, the sidebar does not change height automatically. How can I make sure that the sidebar is also changing height when I stack these divs in the container? Do I need to loop the script?

Hope someone can help me with this.

(ps. I do not have a footer in my website so the sidebar has to keep on the height of the document. (background))

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

送你一个梦 2024-12-20 00:46:02

好的,这是一个由两部分组成的答案。第一部分是您需要获取浏览器视口的高度。第二部分是,每当窗口大小调整时,您都需要重新执行此函数。经过一些测试(在 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());
});

Ok, this is a two part answer. Part one is that you will need to get the height of the viewport for the browser. Part two is that you will need to re-do this function whenever the window resizes. after some testing (in IE 9, Chrome and FF) I've found this to work well:

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());
});
自控 2024-12-20 00:46:02

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

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

我给出了 #sidebar 样式:position:fixed;并将 div 放入 div 外部的侧边栏中,并创建一个新的 div #sidebarcontent。然后给#sidebarcontent样式position:absolute;并将它们放在正确的位置。我对此进行了跨浏览器测试,甚至在 IE6 上也能工作。

I Fixed the problem now. I used another way to set the height of the sidebar always 100%.

For people who want to know how I fixed this:

I gave the #sidebar style: position: fixed; and putted the divs inside the sidebar outside of the div and made a new div #sidebarcontent. Then gave the #sidebarcontent style position: absolute; and placed them on the right place. I tested this for cross browser and it worked even on IE6.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文