ページをスクロールできないようにするにはどうすればいいですか？

Question

私はデータベースからファイルを表示するウェブサイトを作成しています。私の目標は、それらのファイルをテーブルのGoogleドライブのレイアウトに類似したものに表示し、ページをスクロールできないようにすることです。例：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

あなたはすべての要素がページの幅と高さに合うよう、また、テーブルコンテナを作ることができます固定位置でページに収まるようにしてから、スクロール可能にします。

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; 
}