全高列和带有 flexbox 的标题

Question

我对 flexbox 很陌生。我当前的布局不如我希望的那样工作 - 我的列仅与其中的内容一样高。

  +----------------+
  | header         |
  +-+--------------+
  |n|content       |
  |v+--------------+
  +-+
  empty
----------------------

我希望 flexbox 能解决这个问题。我必须改造我现有的标记。

页面是全屏宽度，带有全角标题，然后页面的其余部分是具有固定宽度侧边栏的可变宽度内容。 （有些页面左侧有一个侧边栏，其他页面右侧有一个。）

理想情况下，两个内容区域都将延伸到页面底部（带有彩色背景），但只有在内容长于页面时才会越过折叠并滚动。

  +----------------+
  | header         |
  +-+--------------+
  |n| content      |
  |a|              |
  |v|              |
--+-+--------------+--

我是否将整个页面视为“容器”，在其中创建两行，其中一个是拆分的？还是我只是从具有侧边栏的第二行开始 flexbox 的东西？

在我看来，它必须是前者，如果 flexbox 要知道我的标题有多高。否则，当我将它们的高度设置为 100% 时，它们会超出折叠部分的数量等于我的页眉。

我没有在 flexbox 文档中看到 header-and-split-columns 作为简单示例，但我会继续阅读和试验。

（当然，它还必须是响应式的，因此，在较小的屏幕尺寸下，元素会相互包裹以适应狭窄的屏幕。）

Answer 1

我希望我已经理解了您的问题。这种方法可能会帮助您入门。如果您有任何具体问题，请告诉我...

body {
  margin: 0;
  height: 100vh;
  font-family: sans-serif;
  color: white;
}

.container {
  height: 100%;
  background: grey;
  display: flex;
  flex-direction: column;
}

header {
  height: 150px;
  background: blue;
}

.content {
  height: 100%;
  display: flex;
  background: green;
}

.sidebar {
  background: #76c5ff;
  width: 200px;
}

.main {
  background: #ef3a59;
  flex: 1;
}

@media (max-width: 600px) {
  body {
    height: initial;
  }
  .content {
    height: initial;
  }
  .content {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    order: 2; /* remove this to keep sidebar above main content */
  }
}

<div class="container">
  <header>header
  </header>
  <div class="content">
    <div class="sidebar">sidebar</div>
    <div class="main">main content</div>
  </div>
</div>

Answer 2

您可以创建两个 flexbox - 一个用于划分 header 和“rest”，另一个在“rest”内部将其划分为 nav 和 content。

你也可以只设置标题的最小高度，可以看到here

Answer 3

您可以使用 calc 作为最小高度（假设标题高度为 50px）：

.content {
  min-height: calc(100% - 50px);
  min-height: -webkit-calc(100% - 50px);
}

关于固定宽度的侧边栏，防止它变大或变小：

.sidebar {
  flex-shrink: 0;
  flex-grow: 0;
}

我只会将侧边栏和内容放在弹性框中。将侧边栏和内容都放在容器 div 中，并将 display:flex 分配给容器：

.container {
  display: flex;
  flex-direction: row;
}

当窗口宽度减小到某个点时，您可能需要边栏折叠或随着媒体查询变得流畅。此外，我发现this tool 在使用 flex 时很有帮助，因为它确实变得复杂。

Answer 4

好的，收集我上面得到的所有反馈，并大量借鉴 here，这就是我想出的。

<div class="page-body no-nav no-aside">
    <main>
        <p>content</p>
    </main>
    <nav>nav</nav>
    <aside>details</aside>
</div>

.

.wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: blue;

    header {
        height: 155px;
    }

    .page-body {
        display: flex;
        flex: 1;
        background-color: lavender;
        flex-direction: column;
        min-height: calc(100vh - 155px);
        min-height: -webkit-calc(100vh - 155px);

        nav {
            order: -1;
            background-color: red;
        }

        aside {
            background-color: orange;
        }

        &.no-nav nav,
        &.no-aside aside {
            display: none;
        }
    }
}

@media (min-width: 768px) {

    .wrapper {

        .page-body {
            flex-direction: row;
            flex: 1;

            main {
                flex: 1;
            }

            nav {
                flex: 0 0 385px;
            }

            aside {
                flex: 0 0 320px;
            }
        }
    }
}

• 标题是固定高度
• 页面主体填充页面的其余部分
• 如果需要添加页脚非常简单（参见上面的圣杯文章）
• 所有列都是全高，除非内容流动，否则不会滚动
• 侧边栏固定宽度，内容主体流畅
• 结构是响应式的
• 添加了一些功能来根据需要隐藏/显示每页的侧边栏

奇怪的是，这默认为小屏幕，因为媒体查询会覆盖大屏幕。 （通常与我来自的地方相反。）