侧边栏高度 100% 随着浏览器中 div 大小的变化
我的网站出现问题。 左侧有一个侧边栏,旁边有容器。 目前我找到了这个 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
好的,这是一个由两部分组成的答案。第一部分是您需要获取浏览器视口的高度。第二部分是,每当窗口大小调整时,您都需要重新执行此函数。经过一些测试(在 IE 9、Chrome 和 FF 中),我发现这个效果很好:
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:
我现在解决了这个问题。我用另一种方法将侧边栏的高度设置为始终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.