Question

我刚开始使用Flexbox并遇到问题。

如果我将<section>设置为flex-direction: column，则会停止回复height属性。

以下是相关代码：

＆＃13;

body {
  display: flex;
  background: #d6d6d6;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  width: 94px;
  height: 100vh;
  background: #131519;
  background: #1C1D21;
  color: white;
}

.main-aside-footer-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  .
  /*** THIS IS NOT WORKING ****/
  height: 100vh;
  /****************************/
}

.main-aside-section {
  display: flex;
}

main {
  display: flex;
  background: #83B0B9;
  background: #343943;
  background: #E4B162;
  background: #D35657;
  flex-grow: 1;
}

aside {
  display: flex;
  background: #343943;
  min-width: 50px;
  color: white;
  /*    display: none;*/
}

footer {
  display: flex;
  background: #333;
  color: #ededed;
}

＆＃13;

<nav>
  <ul>
    <li>nav 1</li>
    <li>nav 2</li>
  </ul>
</nav>

<section class="main-aside-footer-section">

  <section class="main-aside-section">
    <main>
      this is main
    </main>

    <aside>
      <ul>
        <li>aside 1 </li>
        <li>aside 2 </li>
      </ul>
    </aside>

  </section>
  <!-- main-aside-->

  <footer>footer</footer>

</section>
<!-- main-aside-footer-->

＆＃13;

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

我需要的是垂直拉伸.main-aside-footer-section元素，使其填满屏幕的高度（以便我的页脚粘到页面底部）。

我在Ubuntu 15.10 64bit上使用Chrome版本53.0.2785.101（64位）

有人可以帮忙吗？

提前致谢

Answer 1

实际上，高度很好。在元素周围包裹边框以查看：

revised codepen

只需将margin-top: auto添加到footer：

即可

revised codepen

以下是一些提供更多详细信息的帖子：

我不能在flex-direction：column之后设置高度

1 个答案: