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将达到TOP的顶部，但它不会延伸到达其底部。

我正在尝试做的是获得任何解决方案，使容器div达到最低点。

Answer 1

间距是由#divTopics

引起的

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

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

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

1 个答案: