html - 如何使页面不可滚动，但只能滚动表格？

Question

我正在创建一个显示数据库文件的网站。我的目标是将这些文件显示为类似于谷歌驱动器的表格布局，并使页面不可滚动，只有表格。示例:http://imgur.com/A16GKLB

我尝试使用 position: absolute; 和 bottom: 0%; 它不会到达底部并且网站正在崩溃。实现这一目标的任何想法？

这是我现在的代码:

table{
    width: 100%;
    table-layout: fixed;
}
.tbl-header{
    background-color: #eee;
}
.tbl-content{
    height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 0;

    background-color: rgb(255,255,255);
    border: 1px solid rgba(0,0,0,.15);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
th{
    padding: 10px 15px;
    text-align: left;

    color: dimgray;
    font-size: 14px;
    font-weight: 600;
}
td{
    padding: 8px 18px;
    text-align: left;
    vertical-align: middle;

    color: dimgray;
    font-size: 12px;
    font-weight: 400;
    background-color: rgb(255,255,255);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

<section class="userFiles-section">
           <div class="row">
               <div class="col-md-12">
                   <div class="tbl-header">
                       <table cellpadding="0" cellspacing="0" border="0">
                           <thead>
                               <tr>
                                   <th>Name</th>
                                   <th>Upload Date</th>
                                   <th>File Size</th>
                                   <th>Download</th>
                                   <th>Delete</th>
                               </tr>
                           </thead>
                       </table>
                   </div>
                   <div class="tbl-content">
                       <table cellpadding="0" cellspacing="0" border="0">
                           <tbody>
                           @files.map { file =>
                               <tr>
                                   <td>@file.getFilename</td>
                                   <td>@file.getUploadDate</td>
                                   <td>@file.getSize</td>
                                   <td><button class="btn btn-primary btn-xs"><i class="material-icons" style="font-size: 21px;">cloud_download</i></button></td>
                                   <td><button class="btn btn-danger btn-xs"><i class="material-icons" style="font-size: 21px;">delete_forever</i></button></td>
                               </tr>
                           }
                           </tbody>
                       </table>
                   </div>
               </div>
           </div>
        </section>

/诺克斯

Answer 1

可以让所有的元素都适应页面的宽度和高度，让表格容器固定位置也适应页面，然后让它可以滚动。

div.tbl-content {
    position: fixed;
    /* Adjust these values to 
    make the table fit within its 
    allocated space */
    top: 100px;
    right: 0px;
    left: 200px;
    bottom: 0px;
    overflow: auto;
}