Javascript 手风琴不会使书页变长

我用的手风琴是这样的：

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>

      .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端大，我需要一个滚动条

谢谢

---

为什么不将手风琴组设置为

溢出：auto

，以便在必要时产生滚动条？我想那会显得更加光鲜

更新

#case-list {
  overflow:auto;
}

---

尝试向包含元素添加高度：自动。

以上答案的替代方法。代码仅用于说明

  <div id="calendar">
    <div id="calside-back">
    </div>
    <div id="calside-front">
    </div>
  </div>

calside front元素是绝对元素，因此将溢出其父元素，calside back元素将“保留”父元素中的空间，以便日历不会隐藏在calside front后面

如果calside front比页面高，则会出现页面滚动条

---

演示

尝试将

溢出：隐藏

添加到

#cal端

。我猜它是一个未清除的浮点。@Milo我猜它是一个浮点，但是你能告诉我们应用的CSS是什么吗？您可以使用所选浏览器中的开发人员工具查看应用的CSS，这样我们就可以实际查看应用于您正在处理的元素的内容。为

#case list

或

添加CSS样式。case container

，无论哪一个是accordion的块容器。如果没有看到为accordion生成的代码，我将无法进一步帮助您。您的手风琴中可能有一个包含元素，它位于文档流之外的

位置。您可以尝试将“我的代码”中的
#案例列表
更改为
#cal端
。包含的元素是什么？很难说，请尝试您的开发人员工具。你能在上面贴个例子吗
height:auto
和
overflow:hidden
通常会解决类似的问题。
#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;
}