设置侧边栏的高度以匹配容器

Question

我有一个容器包含侧边栏的布局。我需要侧边栏与容器的高度完全相同。请参阅侧栏为#leftbar且容器为#container

的this site

如果您查看网站，您会看到我的意思。我要么需要纯css解决方案，要么需要jquery解决方案。

要记住的一件重要事情导航是一个垂直手风琴，所以当点击某些按钮时，侧边栏#leftbar将垂直展开。解决方案需要适应增长，因此使用jquery简单地匹配它们的高度并不是一个可行的解决方案。

Answer 1

将以下属性添加到这些元素：

#cotainer {
    position: relative
}

#leftbar {
    position: absolute;
    top: 0;
    bottom: 0;
}

#righthome {
    margin-left: 270px; /* looks to be about the width of the leftbar */
}

给#leftbar属性显示，将确保顶部粘贴到下一个父元素的顶部position: relative，并且底部边缘相同。

然而，这有副作用。 #righthome元素成为其父级框布局模型中的第一个元素，因此与左侧条重叠。为了解决这个问题，你可以给它一个左边距，把它放回原处。