Question

Attached Img.
请参考附图。我有一个Header，content和Footer。

Header和Footer都是固定的。它们应始终可见在content内，我有一个<table>。我想让<table>取出header和footer之间的所有剩余高度。

该表可能包含大量数据，因此我也希望它可以滚动。

下面的代码段显示了table加div overflow-y: auto; max-height: 200px;（固定大小）后得到的最接近的

如何让它自动获取完整/剩余高度？

body {
  background: green;
  padding: 10px;
}

.header {
  background: lightblue;
}

.content {
  background: lime;
  overflow-y: auto;
  max-height: 200px;
}

.footer {
  background: orange;
}

<div class="header">
  Some awesome title
</div>
<div class="content">
  <table>
    <thead>
      <tr>
        <th>Lorem.</th>
        <th>Numquam.</th>
        <th>Id.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem.</td>
        <td>Eos.</td>
        <td>Vel.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Quod.</td>
        <td>Quaerat?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Explicabo!</td>
        <td>Esse.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Quo.</td>
        <td>Praesentium!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Perferendis!</td>
        <td>Necessitatibus.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Facere.</td>
        <td>Ex.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Ducimus.</td>
        <td>Architecto.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Porro!</td>
        <td>Voluptatum.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Culpa?</td>
        <td>Dignissimos?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Alias.</td>
        <td>Deserunt!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Mollitia!</td>
        <td>Doloribus?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Quia.</td>
        <td>Aspernatur.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Est!</td>
        <td>Nihil.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Neque.</td>
        <td>Asperiores!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Cupiditate.</td>
        <td>Rerum.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Eligendi.</td>
        <td>Qui?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Libero.</td>
        <td>Molestiae!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Suscipit.</td>
        <td>Nostrum.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Minima.</td>
        <td>Voluptatem.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Quam.</td>
        <td>Mollitia.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Minus!</td>
        <td>Corporis.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Perferendis.</td>
        <td>Deleniti.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Asperiores!</td>
        <td>Rem.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Molestiae.</td>
        <td>Dignissimos?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Doloribus.</td>
        <td>Ipsam.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Aperiam.</td>
        <td>Obcaecati.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Suscipit.</td>
        <td>Harum?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Cupiditate.</td>
        <td>Tenetur.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Ea!</td>
        <td>Ipsam.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Officia!</td>
        <td>Velit.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Mollitia!</td>
        <td>Voluptatibus.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Rerum.</td>
        <td>Accusamus?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Distinctio.</td>
        <td>Ducimus.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Iure.</td>
        <td>Recusandae.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Quibusdam.</td>
        <td>Veritatis.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Optio!</td>
        <td>Voluptatum.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>At.</td>
        <td>Facere.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Illum?</td>
        <td>Placeat!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Unde?</td>
        <td>Explicabo.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Reiciendis.</td>
        <td>Architecto.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Quasi?</td>
        <td>Praesentium!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Odit!</td>
        <td>Ratione.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Expedita?</td>
        <td>Incidunt!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Nemo.</td>
        <td>Reprehenderit?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Blanditiis.</td>
        <td>A.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Iusto.</td>
        <td>Similique.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Sint?</td>
        <td>Corrupti.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Consequatur.</td>
        <td>Nihil!</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Magni.</td>
        <td>Deleniti.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Nobis!</td>
        <td>Eius.</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer">
  Pagination stuff
</div>

Answer 1

您需要使用jQuery查找屏幕显示高度，并使用它来设置表格的高度。滚动将自动发生。

Answer 2

使用此代码段后的flexbox解决：https://codepen.io/anthonyLukes/pen/DLBeE

之前尝试使用它失败了，因为我还有一个＆＃34; Navbar＆＃34;我觉得这并不重要，因为它全部包裹在<router-outlet>内，如此：

<div class="container">
  <app-sidebar></app-sidebar>
  <div class="main">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
  </div>
</div>

当我尝试使用flexbox时，我的页脚不可见..内容区域是＆＃34;占用所有剩余区域＆＃34; ...这就是我的想法..

所以我要修复的是：
1.在margin-top

上放置一个.header导航栏的高度

.header {
  flex: 0 0 auto;
  margin-top: 2.5em;
}

2。制作包裹标题，内容和页脚的div＆＃34;向上移动＆＃34;：

.page {
  display: flex;
  flex-flow: column;
  margin-top: -2.5em;
}

这可能是一种更好，更正确的做法，我对Flexbox的运作方式并不了解..但是，我注意到的是，flex: 1 1 auto;会＆＃34;增长/扩展到剩余高度＆＃34;，整个页面的高度，而不是其父级的高度。

因此，在标题中添加margint-top: 2.5em;，基本上是强迫它考虑到＆＃34;导航栏的高度＆＃34;在计算它可以增长多少时。

一旦完成，我会以相同的余量再次移动整个事物。

这是最终结果：img

Answer 3

假设你有这个HTML：

<img src="@Url.GetCropUrl(mediaItem, height: 300, width: 300)" />

您正在搜索此CSS解决方案（因为IE9不支持flexbox）：

<div class="header"></div>
<div class="content">table</div>
<div class="footer"></div>

但我会使用/更喜欢这个：

body {margin: 0;}
.header {height: 50px;}
.content {height: calc(100vh - 100px); overflow-y: scroll;}
.footer {height: 50px;}

后者使用普通页面滚动，而不是div溢出，这会导致较少的跨浏览器问题和更好的（旧）手机性能。

css - 将可滚动表放在剩余高度上（页眉和页脚之间）

3 个答案: