html - Ajax 覆盖 div 超出父级

Question

我正在处理的站点在一个页面上包含多个面板，在每个面板的正文中，通过单击列标题对数据进行排序。每个面板都有自己的 div 覆盖层，在发送 ajax 请求时显示。可以在 https://jsfiddle.net/rorourke/phnwqs0w/ 找到渲染页面的示例。此示例打开了其中一个叠加层 (display: block;)，这是通过 ajax 脚本代码实现的。当 ajax 调用显示覆盖时，它会超出父 div 的范围。

HTML

<div class="row" id="main">
    <div class="col-md-12">
        <div class="navbar navbar-light-page navbar-light-text">
            <div>
                <div class="navbar-header navbar-header-spacer">
                     <h2>Accounts w/ Active Units</h2>

                </div>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>
            </div>
        </div>
        <div class="container-fluid container-border col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading panel-heading-collapsible panel-section" data-toggle="collapse" data-target="#collapse17"> Vectra 123

                </div>
                <div class="panel-collapse collapse in" id="collapse17" style="box-sizing: border-box;">
                    <div class="center-block" id="divLoading17" style="width: 100%; height: 100%; color: orange; font-size: larger; display: block; position: absolute; opacity: 0.4; background-color: dimgray; box-sizing: border-box;">Loading ....</div>
                    <div class="panel-body">
                        <form id="form4" action="/Report/Data/17" method="post" data-ajax-update="#balanceResults17" data-ajax-mode="replace" data-ajax-loading="#divLoading17" data-ajax="true">
                            <div id="balanceResults17">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr class="info">
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="Name">Unit Id</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="CommNumber">Comm #</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="AccountName">Account</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="ChargeNumber">Charge #</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>IASpro1
                                            </td>
                                            <td>103069</td>
                                            <td>Overhead
                                            </td>
                                            <td>ABC130257109</td>
                                        </tr>
                                        <tr>
                                            <td>IASproX
                                            </td>
                                            <td>100154</td>
                                            <td>Overhead
                                            </td>
                                            <td>ABC130257109</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading panel-heading-collapsible panel-section" data-toggle="collapse" data-target="#collapse5"> Vectra 456

                </div>
                <div class="panel-collapse collapse in" id="collapse5">
                    <div class="center-block" id="divLoading5" style="width: 100%; height: 100%; color: orange; font-size: larger; display: none; position: absolute; opacity: 0.4; background-color: dimgray;">Loading ....</div>
                    <div class="panel-body">
                        <form id="form5" action="/Report/Data/5" method="post" data-ajax-update="#balanceResults5" data-ajax-mode="replace" data-ajax-loading="#divLoading5" data-ajax="true">
                            <div id="balanceResults5">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr class="info">
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="Name">Unit Id</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="CommNumber">Comm #</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="AccountName">Account</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="ChargeNumber">Charge #</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>IASdev1
                                            </td>
                                            <td>16100160</td>
                                            <td>Overhead
                                            </td>
                                            <td>ABC130257109</td>
                                        </tr>
                                        <tr>
                                            <td>IASdev2
                                            </td>
                                            <td>16258798</td>
                                            <td>Overhead
                                            </td>
                                            <td>130257109</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.navbar-light {
    background-color: lightsteelblue;
    border-color: #080808;
}
.navbar-light-footer {
    background-color: whitesmoke;
}
.navbar-light-page {
    background-color: grey;
}
.navbar-light-text {
    color: antiquewhite;
}
.navbar-header-spacer {
    margin-left: 10px;
}

.panel {
  border: none;
}

.panel-heading-collapsible {
  cursor: pointer;
}

.panel-heading-collapsible:after {
  margin-right: 10px;

  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
  content: "\e114"; /* adjust as needed, taken from bootstrap.css */
  float: right; /* adjust as needed */
  color: grey; /* adjust as needed */
}

.panel-heading-collapsible.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

.panel-body {
  border: 1px solid lightgrey;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.panel .panel-section {
  background-image: none;
  background-color: lightgrey;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

  .panel .panel-section:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: lightsteelblue #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  }

.btn-link-header {
  font-weight: bold;
  padding: 5px 5px 0;
  border-bottom: 0;
}

我和一位同事尝试了几种可能性，包括使用 top/left 而不是 position: absolute;将每个面板放在一行 div 中(在我添加填充或边距以将面板移回之前“固定”宽度，但没有固定高度)；调整宽度和高度值，这在不同分辨率的屏幕上没有帮助；并将覆盖 div 移动到 HTML 中的不同位置。搜索 div 超出其父项的可能原因似乎都指向 HTML 中的一个或多个 div 上缺少 box-sizing: border-box;。正如您在提供的代码中看到的(并在 fiddle 页面上实现的)，它没有什么不同。

我知道我遗漏了一些东西来正确地约束叠加层，但此时我不确定那是什么东西。

以下 stackoverflow 页面似乎最接近我的情况，但在解决我所看到的特定问题方面并没有取得成果:

Div tags extending beyond their own margins
CSS: Absolute positioned div extending beyond overflow:hidden?
Why do child divs extend beyond their parent div?
Div extends beyond wrapper div

Answer 1

为 .panel-collapse 提供 position:relative;

https://jsfiddle.net/afelixj/phnwqs0w/1/