1

左にカレンダー、右にサイドバーがあります。 ここに画像の説明を入力

問題は、ケースがあふれていることです。代わりに、親より長くなったときにスクロールバーを表示する必要があります。

それらはブートストラップアコーディオンにあります。

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>

イベントは event-containers に入ります。

これはCSSです：

#cal-side
{
    float:right;
    height:100%;
    width:200px;
    margin:50px 5px 5px 5px;
}

#cal-container
{
    width:100%;
}

.accordion-inner
{
    padding:2px 2px !important;
}

.external-event { /* try to mimick the look of a real event */
    margin: 2px;
    padding-left:4px;
    color: #ffffff;
    background-color:blue;
    font-size: .85em;
    cursor: pointer;    
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 20px;
    overflow:hidden;
    }

.event-container
{
    margin:1px;
}
#cal{ 
}

生成された html は次のとおりです。 ここに画像の説明を入力

いくつかのタイプのoverflow:autoを試しました。「機能した」唯一のことは、イベントコンテナの最大高さを固定ピクセル量に設定することでした。次に、ケースのスクロールバーが表示されますが、それ以外の場合は、表示どおりになります。最大高さを cal-side の高さか何かにする必要があります...

どうすればいいのかわからない。

ありがとう

4

2 に答える 2

2

コンテナに、を設定しmax-heightて置きますoverflow: auto

作業例:

http://jsfiddle.net/DRVMG/13/

編集以下のコードは、OPが下に行ったコメントを満たすためだけのものです。私はjQuery彼の元の投稿に提案していません:

カレンダーの高さをサイドバーの高さに設定するには、次のようにします。

$("#sidebar-id").css({"max-height" : $("#calendar-id").height() });

そして、CSS では、overflowのsidebar divをに設定する必要があります。auto

于 2013-04-09T13:16:52.720 に答える
0

オーバーフローを設定しても、要素がその子を含むように展開される方法は変わりません。既にお気づきのようですが、選択したオーバーフロー設定 (例: auto)と特定の高さを組み合わせる必要があります。

で 100% の高さを試しました.event-containerか? それをいじらずに見分けるのは難しいですが、それは望ましい動作を与えるかもしれません (ただし、DOM ツリーのさらに上で何を行っているかによって異なります)。

于 2013-04-09T12:54:46.883 に答える