jquery - 设置表格组件以使用整个视口(viewport)高度显示

Question

我尝试在我的组件中分别使用 height: 100vh 和 minHeight:"100vh" 但它不起作用。它仍然显示整个表格。我有最多可以显示的行，但我希望表格通过使表格主体成为唯一滚动条来避免导致页面滚动条。

我可以通过设置一个确定的高度和隐藏的溢出来实现这一点，但确定的高度是一个问题。并非每个人的视口(viewport)大小都相同，虽然它对少数人来说是完美的，但对某些人来说太小或对其他人来说太长。因此，我希望此表读取窗口高度并使用它来定义隐藏的溢出应该何时开始滚动。

我确实在 jQuery 中找到了这个

$(document).ready(function() {
    function setHeight() {
       windowHeight = $(window).innerHeight();
       $('.sidebar').css('min-height', windowHeight);
    };
    setHeight();

    $(window).resize(function() {
       setHeight();
    });
});

问题是，这似乎不适用于我的 table 。

我正在添加 codepen有一个 Playground 。

编辑:为了澄清起见，这是我的问题的可视化

旁注:这实际上是在 React 应用程序中，所以在它工作之后，我仍然需要在 ReactJS 中获取它，但我想，让它在 jQuery 中工作可能会更快更容易。但是，如果您碰巧在 React 中有解决方案，请分享。

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.dynamicHeight').css('min-height', windowHeight);
  };
  setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});

// If you don't care about changing the height when the window resizes then you can use the following simplified version instead:

// $(document).ready(function() {
//   windowHeight = $(window).innerHeight();
//   $('.sidebar').css('min-height', windowHeight);
// });

body {
  background-color: #ddd;
  font-size: 1.5em;
  font-family: Georgia, serif;
}

.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 33%;
  padding: 2em;
  background-color: #f8ca00;
}
.dynamicHeight{
	overflow-x:hidden;
	height:100%;
	display: inline-block;
	width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='sidebar'>
  <table class="dynamicHeight">
    <thead>
      <tr>
        <th>Header</th>
      </tr>  
    </thead>
    <tbody>
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr> 
      <tr><td>Body Row</td></tr>
      <tr><td>Body Row</td></tr>    
    </tbody>
    
  </table>  
</div>

Answer 1

我设置了 .sidebar 的高度，而不是 .dynamicHeight。我还将 min-height 更改为 height，因为如果内容很长，min-height 会让高度超出窗口。此外，innerHeight 仅返回一个数字，您需要向其添加 px。在 .sidebar

上使用了一些 overflow-y:auto

Javascript

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.dynamicHeight, .sidebar').css('height', windowHeight + 'px');
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

CSS

.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 33%;
  padding: 2em;
  background-color: #f8ca00;
  overflow-y:auto;
}

Codepen