我不完全知道该如何表达,所以我会尽力而为。这是我正在为公司工作的网页的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”,您就可以了。