html - 如何创建一个可滚动区域，该区域可随浏览器调整大小，但在相当大的区域上方和下方也有固定的内容区域？

Question

我很抱歉，因为虽然我确定有人问过这个问题，但经过大量搜索后我找不到解决方案。

我有一张表，其中可能加载了很多数据。该表格位于作为模板化站点一部分的内容区域内，在该内容区域内，表格上方将有一个标题栏和一个过滤器区域。表格下方有一系列按钮。表格需要增长以填满窗口，但页面底部的按钮和页面顶部的标题/过滤器信息必须始终保留在浏览器窗口中。

下面的示例代码是我正在使用的 HTML 的概要。我有一个标题和过滤器 div 需要保留在内容框的顶部，而底部的按钮需要保持“锚定”在浏览器窗口的底部。

表格（或包含 div）需要增长以填充中间的所有空间，并且当内容区域中间的窗口内容太大时，需要出现滚动条。

<!-- site template content above -->
<div id="where the content is loaded for all pages">
  <div class="page-title"> <!-- Needs to stay at the top of the content box. SHOULD NOT vertically scroll out of view. -->
    Show a title, at the top of the page!
  </div>
  <div class="filters"> <!-- Should stay at the top, anchored below the Page Title div. -->
    <input type=text value="blah blah blah" />
    ...
  </div>
  <div class="fill-until-scrollable"> <!-- This needs to grow to fit (both x & y) as the browser window grows. -->
    <table> <!-- This table can have a lot of data. Assume it's height to be 100% of it's content, however, the fill-until-scrollable parent will need to have proper overflow/sizing CSS settings so that if the table data will be scrollable if it's to large for the window, without hiding the buttons below. -->
      ...
    </table>
  </div>
  <div class="action-buttons"> <!-- This needs to be the full width of the page, anchored at the bottom of the browser window. -->
    <button>Foo</button>
    <button>Bar</button>
  </div>
</div>
<!-- site template content below -->

我知道这必须是一个共同的需求，但我找不到办法做到这一点。任何简单的例子将不胜感激。谢谢你。

标签： htmlcss

Answer 1

只要你的容器在某处有一个设定的高度，Flexbox 就可以让你解决这个问题。

.page {
  width: 100%;
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

.page-title,
.filters,
.action-buttons {
  width: 100%;
  flex: 0 0 auto;
}

.fill-until-scrollable {
  flex: 1 1 0;
  overflow: auto;
}

/* Just for the demo… delete these after */
.page { height: 40vh; /* I'm guessing 100vh in your case? */ }
.fill-until-scrollable table { display: block; height: 250vh; background: linear-gradient(00deg, grey, pink); }

<!-- site template content above -->
<div class="page" id="where the content is loaded for all pages">
  <div class="page-title"> <!-- Needs to stay at the top of the content box. SHOULD NOT vertically scroll out of view. -->
    Show a title, at the top of the page!
  </div>
  <div class="filters"> <!-- Should stay at the top, anchored below the Page Title div. -->
    <input type=text value="blah blah blah" />
    ...
  </div>
  <div class="fill-until-scrollable"> <!-- This needs to grow to fit (both x & y) as the browser window grows. -->
    <table> <!-- This table can have a lot of data. Assume it's height to be 100% of it's content, however, the fill-until-scrollable parent will need to have proper overflow/sizing CSS settings so that if the table data will be scrollable if it's to large for the window, without hiding the buttons below. -->
      ...
    </table>
  </div>
  <div class="action-buttons"> <!-- This needs to be the full width of the page, anchored at the bottom of the browser window. -->
    <button>Foo</button>
    <button>Bar</button>
  </div>
</div>
<!-- site template content below -->