私はこのようなアコーディオンを使用しています:
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よりも大きくなった場合、アイテムのスクロールバーが必要です
ありがとう