css - Div 垂直扩展，但如果它已填满容器则可滚动

Question

更新:

我做了一个fiddle用于测试。

---

我想要实现的目标的说明:(行和列是 Bootstrap 4 rows and columns 。)

• 如果第二行已经存在，页面应该只有滚动条“完全压缩”(0 高度)仍然是标题 + 第一行 +页脚放不下视口(viewport)。
• 第二行不用填在所有剩下的淡绿色地方。它的高度可以灵活调整。

flex 盒子？最大宽度？溢出...我应该如何开始？什么是好的解决方案？

HTML:

<div class="page">

  <div class="header">
    ...<br>...
  </div>

  <div class="main">
    <div class="container-fluid">

      <div class="row">

        <div class="col-6">
          <div class="card">
            <div class="card-header"> .... </div>
            <div class="card-body"> .... </div>
          </div>
        </div>

        <div class="col-6">
          <div class="card">
            <div class="card-header"> .... </div>
            <div class="card-body"> .... </div>
          </div>
        </div>

      </div>

      <div class="row">

        <div class="col-6">
          <div class="card">
            <div class="card-header"> .... </div>
            <div class="card-body scrollable"> THIS <br> SHOULD <br> BE <br> THE <br> SCROLLABLE <br> CONTENT </div>
          </div>
        </div>

      </div>

    </div>
  </div>

  <div class="footer">
    ...
  </div>

</div>

CSS:

div.page {
  background-color: palegreen;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
}

div.header,
div.footer {
  background-color: grey;
  padding: 0.5em;
}

div.main {
  display: flex;
  flex-grow: 1;
}

div.row {
  margin-top: 1em;
}

div.scrollable {
  /* ??? */
}

Answer 1

关键是如何计算 <main> 的高度和 flex 的用法, 特别是flex-grow , flex-shrink .

<header> , <main>和 <footer>

The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.

所以我假设你想要 <header>和 <footer>始终保持在顶部和底部。我想为它们以及 <main> 显式设置高度，而不是常规的绝对定位方法。 .

HTML

<header>header</header>
<main class="container-fluid"></main>
<footer>footer</footer>

SCSS

$custom-header-height: 3rem;
$custom-footer-height: 2rem;

header, footer {
    background-color: var(--gray);

    // In order to position the text to the center, like your picture
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

header {
    height: $custom-header-height;
}

footer {
    height: $custom-footer-height;
}

main {
    // Calculate the height for main, which is 100% viewport height -
    // height of header - height of footer
    height: calc(100vh - #{$custom-header-height} - #{$custom-footer-height});
    background-color: var(--teal);
}

结果

这为您提供了一个可以构建内容的 Playground 。

第一行

第一行可以根据其内容自由扩展，但您不希望它占用任何可用空间。这就是你设置 flex-grow: 0; 的原因.此外，当您调整窗口大小时第一行的空间正在缩小，您不希望卡片越过该行。这就是你设置 flex-shrink: 0; 的原因.我们不妨使用快捷方式 flex: 0 0 auto;对于那些 2.

但是为了设置它，第一行(以及第二行)需要是 flexbox children。所以我们设置display:flex;在它的 parent 身上 - <main> .

HTML

<header>header</header>
<main class="container-fluid">
    <div class="row first-row">
        <div class="col-6">
            <div class="card">...</div>
        </div>
        <div class="col-6">
            <div class="card">...</div>
        </div>
    </div>
</main>
<footer>footer</footer>

SCSS(另外)

main {
    display: flex;
    flex-flow: column nowrap;
}

.first-row {
    // I purposely make first row's background yellow so that you can see it
    background-color: var(--yellow);
    flex: 0 0 auto;
}

结果

第二行

这里的关键是制作<card>有空间时不增长，有限空间时收缩，这是 flexbox children 的默认设置:flex: 0 1 auto ;

但同样，为了使用它，它的父级需要 display: flex; .这里的 parent 是col-6因为我们想使用引导网格系统。

HTML

<header>header</header>
<main class="container-fluid">
    <div class="row first-row">
        <div class="col-6">
            <div class="card">...</div>
        </div>
        <div class="col-6">
            <div class="card">...</div>
        </div>
    </div>
    <div class="row second-row">
        <div class="col-6">
            <div class="card">
                ...
                ...
                ...
            </div>
        </div>
    </div>
</main>
<footer>footer</footer>

SCSS(另外)

.second-row {
    // I purposely make second row's background to be blue so that you can see it
    background-color: var(--blue);

    // Any column, class name starts as "col-"
    [class*="col-"] {
        display: flex;
        flex-flow: column nowrap;

        // So that when the second row is compressed to 0, it doesn't show
        // the row completely.
        min-height: 0;

        .card {
            // flex-grow: 0;
            // flex-shrink: 1;
            // Might as well just set it
            // flex: 0 1 auto;
            // But this is the default of flexbox children so we don't need to set
            // it here.

            .card-body {
              overflow-y: auto;
            }
        }
    }
}

结果

The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.

An illustration of what I'd like to achieve

The page should only have scrollbars if the second row is already "fully compressed" (0 height) and still the header + first row + footer can't fit in the viewport

注意事项

1. 当第二行被完全压缩时，仍然有一种奇怪的感觉。滚动条仍然卡在那里，我不知道如何摆脱它。

2. 在不使用引导网格系统的情况下，代码可以稍微简化一些。

演示

https://codepen.io/anon/pen/XBqyxZ

抱歉这篇冗长的帖子。如果您想了解更多flexbox , 这是一个很棒的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/