使用Flexbox布局强制侧栏滚动

发布于 2025-02-12 08:28:11 字数 3495 浏览 0 评论 0原文

我正在尝试使用FlexBox CSS构建两个列布局。页面应由标题，侧边栏，内容区域和页脚组成。

要求之一是让页面消耗整个浏览器窗口空间，但不要溢出它。但是，溢出可能会在单独的部分中发生（例如在这种情况下 - 侧边栏）。

因此，我决定使用Flexbox进行布局，但是如果它的内容比布局引擎更大，则无法弄清楚如何使侧边栏滚动。

我建立了一个示例来更好地解释我的问题。当内容没有太多（内容大小小于容器）时，一切看起来都如预期：

html,
    body {
      height: 100%;
      margin: 0;
    }

    .block {
        border: 1px solid grey;
    }

    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .container > .header {
        flex: 0 1 auto;
        height: 65px;
    }

    .container > .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
    }

    .container > .content > .page {
        flex: 1 1 auto;
    }

    .container > .content > .sidebar {
        flex: 0 1 auto;
        width: 250px;
        overflow: scroll;
    }

    .container > .footer {
        flex: 0 1 auto;
        height: 150px;
    }

<body>
    <div class="container">
      <div class="block header">
        <p>
        <b>Header</b>
        </p>
      </div>
      <div class="content">
        <div class="block sidebar">
            <p>
          <b>Sidebar</b>
            </p>
        </div>
        <div class="block page">
            <p>
          <b>Content</b>
            </p>
        </div>
      </div>
      <div class="block footer">
        <p>
        <b>Footer</b>
        </p>
      </div>
    </div>
</body>

但是，例如，如果侧边栏的内容大小比侧边栏本身大，则页脚会被推下，并导致整个页面溢出浏览器窗口大小：

html,
    body {
      height: 100%;
      margin: 0;
    }

    .block {
        border: 1px solid grey;
    }

    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .container > .header {
        flex: 0 1 auto;
        height: 65px;
    }

    .container > .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
    }

    .container > .content > .page {
        flex: 1 1 auto;
    }

    .container > .content > .sidebar {
        flex: 0 1 auto;
        width: 250px;
        overflow: scroll;
    }

    .container > .footer {
        flex: 0 1 auto;
        height: 150px;
    }

<body>
    <div class="container">
      <div class="block header">
        <p>
        <b>Header</b>
        </p>
      </div>
      <div class="content">
        <div class="block sidebar">
            <p>
          <b>Sidebar</b>
            </p>
            <div style="background-color: blue; height: 800px;"></div>
        </div>
        <div class="block page">
            <p>
          <b>Content</b>
            </p>
        </div>
      </div>
      <div class="block footer">
        <p>
        <b>Footer</b>
        </p>
      </div>
    </div>
</body>

当内容不适合容器而不是扩展容器时，我如何解决此问题并迫使侧边栏以添加滚动行为？

原文

I'm trying to build two column layout using flexbox css. Page should consist of header, sidebar, content area and footer.

One of the requirement is for a page to consume whole browser window space but not overflow it. Overflow could, however, happen in separate sections (like in this case - sidebar).

So I've decided to use flexbox for layout, however can't figure out how to make sidebar scrollable if it's content is bigger than place given to it by the layout engine.

I've built an example to better explain my problem. When there is not too much content (content size is smaller than the container), everything looks as expected:

html,
    body {
      height: 100%;
      margin: 0;
    }

    .block {
        border: 1px solid grey;
    }

    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .container > .header {
        flex: 0 1 auto;
        height: 65px;
    }

    .container > .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
    }

    .container > .content > .page {
        flex: 1 1 auto;
    }

    .container > .content > .sidebar {
        flex: 0 1 auto;
        width: 250px;
        overflow: scroll;
    }

    .container > .footer {
        flex: 0 1 auto;
        height: 150px;
    }

<body>
    <div class="container">
      <div class="block header">
        <p>
        <b>Header</b>
        </p>
      </div>
      <div class="content">
        <div class="block sidebar">
            <p>
          <b>Sidebar</b>
            </p>
        </div>
        <div class="block page">
            <p>
          <b>Content</b>
            </p>
        </div>
      </div>
      <div class="block footer">
        <p>
        <b>Footer</b>
        </p>
      </div>
    </div>
</body>

But if, for example, sidebar's content size is bigger than the sidebar itself, the footer gets pushed down and it causes the whole page to overflow the browser window size:

html,
    body {
      height: 100%;
      margin: 0;
    }

    .block {
        border: 1px solid grey;
    }

    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .container > .header {
        flex: 0 1 auto;
        height: 65px;
    }

    .container > .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
    }

    .container > .content > .page {
        flex: 1 1 auto;
    }

    .container > .content > .sidebar {
        flex: 0 1 auto;
        width: 250px;
        overflow: scroll;
    }

    .container > .footer {
        flex: 0 1 auto;
        height: 150px;
    }

<body>
    <div class="container">
      <div class="block header">
        <p>
        <b>Header</b>
        </p>
      </div>
      <div class="content">
        <div class="block sidebar">
            <p>
          <b>Sidebar</b>
            </p>
            <div style="background-color: blue; height: 800px;"></div>
        </div>
        <div class="block page">
            <p>
          <b>Content</b>
            </p>
        </div>
      </div>
      <div class="block footer">
        <p>
        <b>Footer</b>
        </p>
      </div>
    </div>
</body>

How I could fix this problem and force sidebar to add scrolling behaviour when content doesn't fit the container rather than expand the container?

分享到QQ

分享到微博