javascript - Accordion 不会使页面变长

Question

我正在使用这样的 Accordion :

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 添加到包含元素。