0

我试图在可滚动的 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/上进行了设置

4

1 回答 1

1

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

body {
    height:400px;
}

这样，其余的相对 div 被计算为相对于父元素（主体）。

于 2013-06-11T22:29:36.650 回答