1. 首页
  2. 问答
  3. HTML + CSS：在屏幕内部滚动屏幕高度

HTML + CSS：在屏幕内部滚动屏幕高度

2017-05-28 126 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

相关问题

 相关问题