设置侧边栏匹配容器的高度 [英] Setting height of sidebar to match container
问题描述
我有一个布局,容器中有一个侧边栏。我需要侧边栏是与容器完全相同的高度。请参阅此网站,侧栏为 #leftbar
,容器是 #container
I have a layout where the container holds a sidebar. I need the sidebar to be the exact same height as the container. Please see this site where the sidebar is #leftbar
and the container is #container
如果你看看网站,你会看到我的意思。我需要一个纯CSS解决方案或一个jquery解决方案。
If you look at the site, you will see what I mean. I either need a pure css solution or a jquery solution.
一个重要的事情要记住nav是一个垂直的手风琴,所以当某些按钮被点击时,侧边栏, #leftbar
将垂直展开。解决方案需要适应增长,所以使用jquery简单地匹配它们的高度是不可行的解决方案。
One important thing to keep in mind The nav is a vertical accordion, so when certain buttons are clicked, the sidebar, #leftbar
will expand vertically. The solution needs to accommodate growth, so simply matching their heights using jquery isn't a viable solution.
推荐答案
添加以下属性到这些元素:
Add the following properties to these elements:
#cotainer {
position: relative
}
#leftbar {
position: absolute;
top: 0;
bottom: 0;
}
#righthome {
margin-left: 270px; /* looks to be about the width of the leftbar */
}
code> #leftbar 属性显示,将确保顶部贴在下一个父元素的顶部 position:relative
Giving the #leftbar
the properties show, will ensure the top sticks to the top of the next parent element with position: relative
, and the same for the bottom edge.
但是这有副作用。 #righthome
元素成为其父级框布局模型中的第一件事,因此与左侧栏重叠。为了弥补这一点,你给它一个左边距,把它放回原来的地方。
However this has a side effect. The #righthome
element becomes the first thing in its parents box layout model, and therefore overlaps the left bar. To remedy this you give it a left margin to put it back in the place it would have been.
这篇关于设置侧边栏匹配容器的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!