设置侧边栏匹配容器的高度 [英] 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屋！