我正在将一个行数不固定的表动态加载到 Bootstrap 网页中。当行太多无法适应页面的高度时，浏览器会像往常一样添加滚动条。
我想要<body>元素不溢出，并为 <div class="col-md-12" id="search-results"> (其中包含表格)改为垂直滚动。
这是我尝试过的:
// css:
body {
overflow: hidden;
}
div.text-area {
max-height: 90%;
}
div.search-results {
overflow-y: scroll;
}
// the page:
<div class="container text-area">
<div class="row">
<div class="col-md-12" id="search-results">
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Foo</th><th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
这是服务器响应的格式:
<div class="panel my-panel panel-default">
<div class="panel-body my-form">
<table class="table my-tbl">
<thead>
<tr>
<th>Foo</th><th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
和我的 jquery 将响应添加到页面:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$('#search-results').html(xmlhttp.responseText);
}
感谢您的帮助!
最佳答案
首先我们要弄清楚溢出是什么以及它是如何发生的，其实很简单。我总是这样描述它:“你不能将 10 加仑的水放入 5 加仑的桶中。如果你尝试，5 加仑的水会溢出。”
当然是这样，但这里的关键是桶(在本例中为您的 <div class="col-md-12" id="search-results">)具有确定的尺寸(在我的类比中为 5 加仑，但您的代码中没有确定的尺寸)。如果您在容器上设置一个大小，将容器设置为知道如何处理溢出，然后在容器中放入太多内容，溢出将按照您的意愿进行处理。
I would like for the
<body>element to not overflow, ...
唯一的方法body如果您在其上设置了尺寸，然后让它包含比这些尺寸更大的内容，则可能会溢出。鉴于 body代表整个页面，我们永远不会真正想要这样做，这意味着 body永远不会溢出 - 它只是流动。结果，这段代码:
body {
overflow: hidden;
}
没有为您做任何事情，应该被删除。
...and for the
<div class="col-md-12" id="search-results">(which contains the table) to have vertical scrolling instead.
然后是<div class="col-md-12" id="search-results">它应该有一个有限的大小设置和 overflow:scroll为其定义。你有 overflow:scroll设置但没有尺寸。
关于javascript - 动态加载的表不会 "overflow: scroll"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44576531/