Question

我将具有非固定行数的表动态加载到引导程序网页中。如果行数太多而无法适应页面的高度，则浏览器会像往常一样添加滚动条。

我希望<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);
}

感谢您的帮助！

Answer 1

首先，让我们清楚溢出是什么以及它是如何发生的，这实际上非常简单。我总是这样描述“你不能在10加仑桶里加10加仑的水。如果你试试，5加仑会溢出。”

当然是这种情况，但关键是这个桶（在这种情况下你的<div class="col-md-12" id="search-results">）有一个明确的大小（在我的比喻中为5加仑，但代码中没有确定的大小）。如果你在容器上放一个大小，设置容器知道如何处理溢出，然后在容器中放入太多内容，溢出将按你的意愿处理。

我希望<body>元素不会溢出，...

body溢出的唯一方法是，如果您在其上设置尺寸，然后使其包含的内容大于这些尺寸。鉴于body代表整个页面，我们永远不会真的想要这样做，这意味着body不会溢出 - 它只是流动。结果，这段代码：

body {
    overflow: hidden;
}

没有为你做任何事情，应该被删除。

...以及<div class="col-md-12" id="search-results">（其中包含表格）以进行垂直滚动。

然后是<div class="col-md-12" id="search-results">应该在其上设置有限大小并为其定义overflow:scroll。您已设置overflow:scroll但没有大小。

动态加载表赢了＆＃34;溢出：滚动＆＃34;

1 个答案: