html - 如果需要动态高度，如何让表格自动滚动(y)？

Question

本质上，我希望表格尽可能多地显示在您的浏览器窗口中。但是我不需要向下滚动整个页面，而只需要滚动 tbody。你能帮忙吗？

这里有一个 fiddle 可以提供帮助:http://jsfiddle.net/drKpT/

还有我的 HTML:

<div id="container">
    <div id="header"><h1>This is my header</h1></div>
    <div id="sidebar"><ul><li>Nav 1</li><li>Nav 2</li></ul></div><div id="content">
        <div id="title"><h2>This is my content title</h2></div>
        <div id="data">
            <table>
                <thead>
                    <tr><th>id</th><th>name</th></tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>Pssssssst... &nbsp; &nbsp; I'd like this area (tbody) to scroll if it's taller than the window you're in</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="footer"><p>This is my footer</p></div>
</div>

和 CSS:

div,ul,li,h1,h2,td,tr {
    padding:0;margin:0;
}
#container {
    width:100%;
    background:#efefef;
}
#header {
    width:100%;
    display:inline-block;
    background:#dedede;
}
#sidebar {
    display:inline-block;
    width:20%;
    background:#cdcdcd;
}
#content {
    display:inline-block;
    width:80%;
    background:#bcbcbc;
}
table {
    border-collapse:collapse;border-spacing:0;
    width:100%;
}
tbody {
    border:3px dashed;
    width:100%;
}
#footer {
    width:100%;
    background:#ababab;
}

Answer 1

您无法更改 tbody 的大小，因为它随内容高度而扩展。要回答此解决方案，您需要创建另一个表。所以你有一个表只包含 thead。放在下面的另一个表只包含 tbody，包裹在一个带有自动溢出和一些高度的 div 中

如果你想让你的表尽可能多地填充可用空间，这里是伪代码逻辑:

wanted_height = window_height - header_height - footer_height - some_fix_constant

编辑:第三版，http://jsfiddle.net/drKpT/3/