【发布时间】：2015-06-18 18:41:10
【问题描述】：
我正在处理的网站在一个页面上包含多个面板，并且在每个面板的正文中，通过单击列标题对数据进行排序。每个面板都有自己的 div 覆盖，在发送 ajax 请求时显示。可以在https://jsfiddle.net/rorourke/phnwqs0w/ 找到呈现页面的示例。此示例通过 ajax 脚本代码打开了覆盖层之一 (display: block;)。当 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;。正如您在提供的代码中看到的（并在小提琴页面上实现），它没有任何区别。
我知道我遗漏了一些东西来正确限制叠加层，但目前我不确定那是什么。
以下 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
【问题讨论】：
标签： html css twitter-bootstrap