手风琴不会使页面更长

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

为什么不将手风琴组设置为overflow:auto以便在必要时导致滚动条？我认为这样看起来会更加精致。

更新

#case-list {
  overflow:auto;
}

Answer 2

尝试将height: auto添加到包含元素。

Answer 3

上述答案的替代方案。代码仅供参考。

  <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