当孩子变长时,父母div会变长

时间:2013-04-09 12:49:56

标签: javascript html css twitter-bootstrap

我左边有一个日历,右边有一个侧栏: enter image description here

问题在于,案件正在泛滥。相反,我需要在滚动条长于其父级时显示滚动条。

他们是自行车手风琴。

这是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:

#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: enter image description here

我尝试了几种类型的溢出:auto。 “工作”唯一的事情是将event-container max-height设置为固定像素ammount。然后我看到一个滚动条用于案例,但除此之外,它会做你所看到的。我需要最大高度为cal-side的高度或什么......

我不知道该怎么做。

由于

2 个答案:

答案 0 :(得分:2)

在您的容器上,设置max-height并放置overflow: auto

工作示例:

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

编辑下面的代码只是为了满足OP在下面发表的评论,我不建议将jQuery提交给他原来的帖子:

要将日历的高度设置为侧边栏的高度,您可以执行以下操作:

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

然后在CSS中,您需要将overflow的{​​{1}}设置为sidebar div

答案 1 :(得分:0)

设置溢出不会改变元素扩展以包含其子元素的方式。您似乎已经注意到了,您需要将您选择的溢出设置(例如auto组合在一起。

你在.event-container上尝试过100%的高度吗?如果不玩它就很难说,但这可能会产生所需的行为(取决于你在DOM树上的进一步发展)。