1. 首頁
  2. 問答
  3. HTML + CSS：在屏幕內部滾動屏幕高度

HTML + CSS：在屏幕內部滾動屏幕高度

2017-05-28 159 views
1

如何在中創建表格div（使用剩餘屏幕高度）滾動而不滾動整個頁面？HTML + CSS：在屏幕內部滾動屏幕高度

我知道如何使它在div內滾動通過包裝它像這樣

<div style="overflow: auto; height: 300px;"> 
     <table>...</table> 
    </div>

，但我怎樣才能使div的高度使用所有剩餘屏幕的高度？

編輯：這是到目前爲止我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Table</title> 
    <link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body> 
<div class="col-md-12"> 
    <div class="panel panel-default"> 
     <!-- Header --> 
     <div class="panel-heading">Panel Heading<button class="pull-right" onclick="myFunction();"> 
      <span class="glyphicon glyphicon-filter"></span> 
     </button> 
     </div> 
     <div class="panel-body row" id="filter" style="display: none; padding-top: 0;"> 
     <div class="col-md-6"> 
      <div class="col-sm-6 column" style="height: auto; margin-top: 1em"> 
      <!-- filter selector --> 
      </div> 
     </div> 
     </div> 

     <!-- Table --> 
     <div class="panel-body" style="overflow: auto; height: 300px;"> 
      <table class="table"> 
      ... 
      </table> 
     </div> 
    </div> 
</div> 

<script> 
    function myFunction() { 
     var x = document.getElementById('filter'); 
     if (x.style.display === 'none') { 
      x.style.display = 'block'; 
     } else { 
      x.style.display = 'none'; 
     } 
    } 
</script> 
</body> 
</html>

來源

2017-05-28 F.M.F.

+0

如果您分享一些代碼以便其他成員不必猜測發生了什麼，您將獲得幫助。謝謝 –

+0

你以前用過'height：100vh'嗎？使用它可能會幫助你 – Maher

回答

1

使用VH代替％：[100vh]垂直高度

我設置寬度90％，你可以改變它。

表始終中心因爲div.parent是margin: 0 auto

 .parent { 
 
      background-color: #ccc; 
 
      width: 90%; 
 
      height: 100vh; 
 
      overflow: auto; 
 
      margin: 0 auto 
 
     }
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="parent"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>#</th> 
 
        <th>Column heading</th> 
 
        <th>Column heading</th> 
 
        <th>Column heading</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 

 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 

 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
       <tr class="active"> 
 
        <th scope="row">1</th> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
        <td>Column content</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div>

來源

2017-05-28 06:57:48 Maher

1

與概述，你可以做以下

<div style=" 
    overflow-y: auto; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: n%; 
    border-left: 1px solid #000; 
"> 
    <table>...</table> 
</div>

我要離開它的right我用的是border-left所以你可以看到你需要一個合理的width

編輯：編輯html

您設置了父母標記position財產relative。

您使用position: absolute;爲div標籤

來源

2017-05-28 06:51:31

相關問題

 相關問題