如何使div溢出底部的其他内容？

Question

我有以下用于引导崩溃的HTML代码

<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;">
  <div class="panel panel-default">
    <div class="panel-heading" style="padding:0px;">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
          <span style="float:left;">Month Calendar</span>
          <span class="glyphicon glyphicon-menu-down" style="float:right"></span> 
        </button>    
    </div>
    <div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;">
      <div class="panel-body" style="padding:0px;">
          @Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
      </div>
    </div>
  </div>
</div>

这有一个开发快速控制。当页面加载导航器（这是一个日历）时，显示器展开并且其下方的上下文移动。所以为了防止这种情况，我需要让日历溢出内容。如何使这个日历控件溢出另一个？

这是一张显示最新情况的图片

Answer 1

你应该设置面板默认位置：relative，使它的后代绑定到它，然后使面板折叠位置：绝对，以防止它影响流的其余部分。

<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;position:relative">
  <div class="panel panel-default">
    <div class="panel-heading" style="padding:0px;">
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
      <span style="float:left;">Month Calendar</span>
      <span class="glyphicon glyphicon-menu-down" style="float:right"></span> 
    </button>    
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;position:absolute;top:100%;">
  <div class="panel-body" style="padding:0px;">
      @Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
  </div>
    </div>
  </div>
</div>

注意：您使用了很多内联样式，最好在css中保留尽可能多的样式。