Question

我对flexbox很新。我目前的布局效果不如我所希望的那样 - 我的列只有它们内容的高度。

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

我希望flexbox能解决这个问题。我将不得不改造我现有的标记。

页面为全屏宽度，带有全宽标题，然后页面的其余部分为流体宽度内容，并带有固定宽度侧边栏。（有些页面左边有一个侧边栏，右边有一个侧边栏。）

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

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

我是否将整个页面视为“容器”，我在其中创建了两行，其中一行是拆分的？或者我只是使用带有侧边栏的第二行启动flexbox内容？

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

我没有在flexbox文档中看到标题和拆分列作为一个简单示例，但我会继续阅读和试验。

（当然，它也必须具有响应性，以便在较小的屏幕尺寸下，元素彼此包裹以适合狭窄的屏幕。）

Answer 1

好的，收集我上面得到的所有反馈，并大量借用 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;
            }
        }
    }
}

标题是固定高度
Page-body填充页面的其余部分
如果需要，可以直接添加页脚（参见上面的Holy-Grail文章）
除非内容流动，否则所有列都是全高，不滚动
侧边栏是固定宽度，内容体是流体
结构是响应
添加了一些功能来隐藏/显示每页所需的侧边栏

奇怪的是，这默认为小屏幕，因为媒体查询会覆盖更大的屏幕。（通常是我来自哪里。）

Answer 2

您可以创建两个弹性框 - 一个用于划分header和＆＃34;休息＆＃34;，另一个用于内部＆＃34;休息＆＃34;将其划分为nav和content。

您也可以设置标题的最小高度，如here

所示

Answer 3

我希望我理解你的问题..这种方法可能会帮助你开始。如果您有任何具体问题，请告诉我......

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 4

您可以使用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时很有用，因为它确实很复杂。

全高度列和带有flexbox的标题

4 个答案: