时间戳

首页 > 解决方案 > 如何使 flex 容器填充浏览器窗口高度（具有滚动复杂性）

html - 如何使 flex 容器填充浏览器窗口高度（具有滚动复杂性）

问题描述

我在 a和 a<main>之间有一个 flex 容器，在那个容器中我有许多列。我已经设置了水平滚动来处理太多列无法一次显示的情况，并且我还启用了列的细分上的垂直滚动。目的是标题锚定在窗口的顶部，页脚锚定在窗口的底部，并且之间的空间用于显示列，并根据需要进行滚动。<header><footer><main>

<header>HEADER</header>
<main class="columns">
  <div class="column">
    <h3>column 1</h3>
    <div class="content">
      long content that would scroll
    </div>
  </div>
  <div class="column"><h3>col2</h3><div class="content">...</div></div>
  <div class="column"><h3>col3</h3><div class="content">...</div></div>
  <div class="column"><h3>col4</h3><div class="content">...</div></div>
  <div class="column"><h3>col5</h3><div class="content">...</div></div>
</main>
<footer>FOOTER</footer>


/* trimmed css */
header,
footer { }

main {
  display: flex;
  column-gap: 3px;
  width: 100%;
  height: 600px;
  overflow-x: auto;
}

.column {
  width: 200px;
  min-width: 200px;
}

.column .content {
  height: 570px;
  overflow-y: scroll;
}

列，在页眉和页脚之间

我在这里完成了大部分工作https://codepen.io/ericscheid/pen/mdMwyEE

该演示当前height: 600px;为列硬编码 a。（也div.column div.content设置为height: 570px;，这是一个令人不满意的魔法数字破解，无法让滚动正常工作，如果任何div.column h3元素溢出到两行，它就会中断。）

但是，我不知道如何让列容器元素填充浏览器窗口的可用高度。我尝试将各种高度设置为 100%，设置使用display:inline-block... 但此时我只是将猜测放入黑匣子中。

如何让列填充可用高度？并让 scolling 正常工作（例如，如果有一个特大的<h3>）。（如果可能的话，我宁愿不使用 javascript 来动态计算高度等）。

标签： htmlcssflexbox

解决方案

推荐阅读