手风琴菜单达到过去的父 Div 高度

Question

我不知道该如何表达，所以我会尽力而为。这是我正在为公司工作的网页的 JSFiddle：

#divMain{
    width: 100%;
    height: auto;
}
#divFAQ{
    width: 1000px;
    background-color: #ffffff;
    min-height: 500px;
}
#divTopics{
    position: relative;
    top: 50px;
    left: 50px;
    width: 500px;
}
#ulTopics{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 500px;
}
#ulTopics > li{
    width: 100%;
    background-image: URL("http://i.imgur.com/FVKGcnj.png");
    line-height: 54px;
    min-height: 54px;
    text-align: center;
    background-repeat: repeat-x;
    margin-bottom: -1px;
}
#ulTopics input[type=checkbox]{
    display: none;
}
#ulTopics li .FAQList{
    max-height: 0px;
    overflow: hidden;
    transition: all .4s ease-in-out;
}
#ulTopics li input:checked ~ .FAQList{
    max-height: 500px;
}

它包含一个使用复选框的手风琴菜单。唯一的问题是在扩展整个菜单后，父级 div 的高度只能容纳最后一个设置了高度的元素的顶部。因此，如果最后一个具有高度的元素是下拉列表，容器 div 会到达顶部，但不会延伸到底部。

我想做的是找到任何解决方案，使容器 div 到达底部。

Answer 1

间距是由您的#divTopics引起的

#divTopics{
    position: relative;
    top: 50px; //pushes 50px down
    left: 50px;
    width: 500px;
}

将 'top' 更改为 'margin-top' 应该没问题。

手风琴菜单达到过去的父 Div 高度

Accordion Menu Reaches Past Parent Div Height

css

height

accordion