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

http://jsfiddle.net/hzkem4zx/

#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超出底部。

最佳答案

间距是由您的#divTopics引起的

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


将“ top”更改为“ margin-top”,您就可以了。

10-05 20:58
查看更多