html - 如何让 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>

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

这是一张展示发生了什么的图片

Answer 1

您应该设置面板默认position:relative，以便它的后代绑定(bind)到它，然后设置面板折叠position:absolute，以防止它影响流程的其余部分。

<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 中保留尽可能多的样式。