Question

我试图在可滚动的div周围有一个固定的页眉和页脚。

如果我将表Div设置为绝对值（虽然我得到滚动条），当数据加载到表行时，页脚不会重新定位。如果我让它呈现默认值，那么页脚会正确移动到页面的底部，但是表格的div只会扩展到它需要的任何大小，我必须使用浏览器滚动。

<header/>
<div id="ListDiv">
    <table id="adapter-table" class="grid">
        <thead>
            <tr>
                <th>Manufacturer</th>
                <th>Name</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Adapters">
            <tr>
                <td data-bind="text: Manufacturer"></td>
                <td data-bind="text: Name"></td>
                <td><a href="#" data-bind="click: $parent.selectItem">Edit</a></td>
                <td><a href="#" data-bind="click: $parent.deleteItem">Delete</a></td>
            </tr>
        </tbody>
    </table>
</div>
<footer/>

如何让表格滚动？我不在乎thead是否在屏幕上滚动，弄清楚它并不复杂，脚下的编辑形式使其不再需要。

我正在尝试这个作为我的css：

body {
    height:100%;
}

header, footer {
    background: #ccc;
    height:20%;
}

#ListDiv{
    height: 60%;
    width: 100%;
    overflow-y:auto;
}

.grid {
    border: 1px solid black;
    border-spacing: 0;
    width: 95%;
}

我已经在http://jsfiddle.net/gregmason/UChLF/10/

上进行了设置

Answer 1

将身体的高度更改为固定高度，例如

body {
    height:400px;
}

这样，其余的相对div被计算为父元素（body）的相对值。

Div不会在动态表加载上重新定位页脚

1 个答案: