我正在处理的网站在页面上和每个面板的正文中包含多个面板，通过单击列标题对数据进行排序。每个面板都有自己的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中（＆＃34;固定＆＃34;有宽度，直到我添加填充或边距以将面板移回，但没有固定高度）;调整宽度和高度值，这对于不同分辨率的屏幕没有帮助;并将overlay div移动到HTML中的不同位置。搜索div可能超出其父级的可能原因似乎都指向HTML中的一个或多个div上缺少box-sizing: border-box;。正如您在提供的代码中看到的那样（并在小提琴页面上实现），它没有任何区别。
我知道我错过了正确约束叠加层的东西，但此时我还不确定那是什么东西。
以下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