0

我正在使用这样的手风琴： 在此处输入图像描述

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

谢谢

在此处输入图像描述

4

3 回答 3

0

您为什么不将手风琴组设置为overflow:auto以便在必要时产生滚动条？我认为这会显得更优雅。

更新

#case-list {
  overflow:auto;
}
于 2013-04-08T20:21:14.163 回答
0

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

于 2013-04-08T20:29:02.607 回答
0

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

  <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 比页面高，那么页面滚动条就会出现。

演示在这里

于 2013-04-08T20:43:21.050 回答