Question

我在一个div中创建了一个带有手风琴的html页面，在另一个div元素中创建了一个菜单。菜单div使用

在元素右侧有一个简单的边框样式

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

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

http://jsfiddle.net/ZxnAd/ 的jsfiddle 请选择“第3部分”以查看未使用手风琴

延伸的边框

Answer 1

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

<强>第一

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

像

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

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

<强>第二

使用js，您必须找到height的{{1}}并将accordion应用于height div#menus click event 1}}喜欢，

accordion div

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

所以，我认为$('div#menus').height($('div.accordion').height());对你来说是first one。

Answer 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;

}

边境右侧风格不随手风琴向下延伸

2 个答案: