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>

/ noxx

Answer 1

您可以使所有元素都适合页面宽度和高度，并使表格容器也适合具有固定位置的页面，然后使其可滚动。

import requests, zipfile, io
r = requests.get(zip_file_url)
z = zipfile.ZipFile(io.BytesIO(r.content))
z.extractall()

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

1 个答案: