我正在使用这样的手风琴:
html看起来像:
<div id="cal-container">
<div id="cal-side">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle project-header" data-toggle="collapse" data-parent="#accordion2" href="#project-list">Projects
</a>
</div>
<div id="project-list" class="accordion-body collapse">
<div class="accordion-inner">
<div class="event-container project-container">
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle task-header" data-toggle="collapse" data-parent="#accordion2" href="#task-list">Tasks
</a>
</div>
<div id="task-list" class="accordion-body collapse">
<div class="accordion-inner">
<div class="event-container task-container">
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle case-header" data-toggle="collapse" data-parent="#accordion2" href="#case-list">Cases
</a>
</div>
<div id="case-list" class="accordion-body collapse">
<div class="accordion-inner">
<div class="event-container case-container">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cal">
<div id='calendar'>
</div>
</div>
</div>
CSS看起来像:
.calendar
{
margin:16px;
border-collapse:separate !important;
-webkit-border-radius: 7px;
border-radius: 7px;
border-spacing:0;
}
.cal-container
{
margin-left:auto;
margin-right:auto;
display: table;
width:100%;
}
#cal-side
{
float:right;
height:100%;
width:200px;
margin:50px 5px 5px 5px;
}
#cal-container
{
width:100%;
}
.top-link
{
display:inline-block;
}
.accordion-inner
{
padding:2px 2px !important;
}
#cal{
overflow:hidden;
}
问题是当我有太多事件时,页面不会在内容的底部出现。
我怀疑导致它的风格是:
#cal{
overflow:hidden;
}
没有它,它会滚动到底部,但是日历也会下到底部......
我需要一种方式让它看起来像我的图像,但页面的底部应该在底部。事件不应该渗透它。
如果项目比父div / cal-side
更大,我想要一个滚动条由于
答案 0 :(得分:0)
为什么不将手风琴组设置为overflow:auto
以便在必要时导致滚动条?我认为这样看起来会更加精致。
更新
#case-list {
overflow:auto;
}
答案 1 :(得分:0)
尝试将height: auto
添加到包含元素。
答案 2 :(得分:0)
上述答案的替代方案。代码仅供参考。
<div id="calendar">
<div id="calside-back">
</div>
<div id="calside-front">
</div>
</div>
CSS
#calendar {
width: 100%;
height: 70%;
position: relative;
}
#calside-back {
width: 40%;
height: 100%;
float: right;
}
#calside-front {
width: 40%;
height: 150%;
position: absolute;
right: 0;
}
calside-front元素是绝对的,因此会溢出其父元素,而calside-back元素将“保留”父元素中的空格,以便日历不会隐藏在calside-front后面。
如果calside-front比页面高,则会出现页面滚动条。
演示here