javascript - アコーディオンはページを長くしません

Question

私はこのようなアコーディオンを使用しています：

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よりも大きくなった場合、アイテムのスクロールバーが必要です

ありがとう

Answer 1

height: auto包含要素に追加してみてください。

Answer 2

上記の回答の代替。コードは説明のみを目的としています。

  <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 がページよりも高くなると、ページのスクロールバーが表示されます。

デモはこちら

Answer 3

overflow:auto必要に応じてスクロールバーを表示するために、そのアコーディオン グループを に設定してみませんか? より洗練された印象になると思います。

アップデート

#case-list {
  overflow:auto;
}