Javascript 动态加载的表赢得'；"；溢出：滚动“；

我正在将一个非固定行数的表动态加载到一个引导web页面中。当有太多的行不适合页面的高度时，浏览器会像往常一样添加一个滚动条

我希望

元素不溢出，而

（包含表格）具有垂直滚动

以下是我尝试过的：

// 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>

---

谢谢你的帮助

首先，让我们弄清楚什么是溢出以及它是如何发生的，这其实很简单。我总是这样描述它：“你不能把10加仑的水放在一个5加仑的桶里，如果你尝试，5加仑的水就会溢出。”

当然是这样，但这里的关键是水桶（在本例中是您的

）有一个确定的大小（在我的类比中是5加仑，但在您的代码中没有确定的大小）。如果在容器上放置一个大小，将容器设置为知道如何处理溢出，然后在容器中放置太多内容，溢出将按您的意愿处理

我希望

元素不溢出

正文

溢出的唯一方法是在其上设置维度，然后使其包含大于这些维度的内容。鉴于

body

代表整个页面，我们永远不会真正想要这样做，这意味着

body

永远不会溢出，它只是流动。因此，此代码：

body {
    overflow: hidden;
}

没有为您做任何事情，应该删除

…对于

（其中 包含表格）以进行垂直滚动

---

然后，应该在

上设置有限大小，并为其定义

溢出：滚动。您已经设置了溢出：滚动设置，但没有大小。
要使溢出生效，您需要设置高度。使用基于百分比的高度而不设置父对象的高度将被忽略。
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    $('#search-results').html(xmlhttp.responseText);
}

body {
    overflow: hidden;
}