右边框样式不随手风琴向下延伸答案

【问题标题】：border right style not extending down with accordion右边框样式不随手风琴向下延伸
【发布时间】：2013-05-28 18:44:19
【问题描述】：

我创建了一个 html 页面，其中一个 div 中有一个手风琴，另一个 div 元素中有一个菜单。菜单 div 在元素右侧有一个简单的边框样式，使用

height:100%;
 border-right-width:2px;
 border-right-style:solid;
 border-right-color:#4875B4;

这一切都很好，但是，每当我扩展手风琴标题时，边框也不会扩展（我认为它会因为高度设置为 100%）。我不能在手风琴上使用边框样式，因为在我使用的代码中我将其隐藏为默认值。

http://jsfiddle.net/ZxnAd/ JSFiddle 请选择“第 3 部分”以查看不使用手风琴延伸的边框

【问题讨论】：

为什么不在手风琴上加边框呢？ Example
为什么不给pane加个边框呢？

标签： jquery css accordion

【解决方案1】：

有两种方法可以解决您的问题

第一

从#menus 中删除right border 并将left border 应用于div.accordion

喜欢

.accordion {border-left:2px solid #F00;}

小提琴 http://jsfiddle.net/ZxnAd/14/

第二

通过使用js，您必须找到accordion 的height，并将height 应用于click event 的div#menus 上的div#menus，例如，

$('div#menus').height($('div.accordion').height());

但是这会产生问题，您可能需要更改 HTML 结构

所以，我认为first one 对你来说是good。

【讨论】：

您好 Rohan，我想使用您的第二个解决方案，但是，每当我单击手风琴标题时，它会在单击之前拾取高度。这会导致折叠标题时边框变长。

【解决方案2】：

我希望你的问题是这个意思：

将您的 CSS 替换为：

.accordion {
 position:absolute;
 color: #AAA;
 //title-background:black;
 top:0;
 left:195px;
 padding: 0px;
 width:100%;
}

它使 div 的边框 100% 向右

菜单边框：

#menus{
 position:absolute;
 top:2px;
 left:0;
 width:190px;
 height:100%;
 border-style:solid;
 border-right-width:2px;
 border-right-style:solid;
 border-right-color:#119900;

}

【讨论】：

如果你想让背景图片填充它：而不是 no-repeat 让它重复
抱歉，我想要在“菜单”div 上添加边框，而不是手风琴，因为手风琴在加载时隐藏在我的源代码中
不幸的是，这并没有解决它。当您展开“第 3 部分”，然后向下滚动页面时，您会看到边框没有下到底部
我猜你需要一些 jquery。因为它仍然是100％。但是第 3 部分低于 100% 并创建了一个新的 100% 高度，这是 css 看不到的。