Question

https://codepen.io/Champion36O/pen/MoyyMv 我需要做些什么才能让 .body元素拉伸并占用包装器中的所有可用空间？基本上，我想看到容器底部的页脚。我想添加 flex-grow 属性可以解决这个问题但是没有..

<html>
  <head>
    <meta charset="utf-8">
    <title> Learning Flexbox </title>
    <link rel="stylesheet" href="flexbox.css">
  </head>
  <body>

    <h1> CSS Flexbox Practical Examples </h1>

    <div class="example">
      <h2>3 Column layout</h2>
      <div class="example-page example-layout">
        <header>Header</header>

        <div class="body">
          <div class="col1"> Main Content </div>
          <div class="col2"> Navigation </div>
          <div class="col3"> Sidebar </div>
        </div>

        <footer> Footer </footer>

      </div>
    </div>
  </body>
</html>


h1 {
      text-align: center;
    }

    .example-page {
      min-height: 45px;
      padding: 2em;
    }
    .example {
      border: 2.5px solid black;

    }

    h2 {
      text-align: center;
      font-size: 1em;
      margin: 0;
      padding: 0;
      background-color: black;
      color: white;
    }

    .example-layout {
      display: flex
      flex-direction: column;
      height: 300px;
    }

    header, footer {
      padding: 20px;
      background: #666;
      color: white;
    }

    .body {
      display: flex;
      flex-grow: 1;
    }

Answer 1

我建议您阅读有关flexbox的好指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我在下面更正了您的代码。 ts-jest应该应用于容器。我还在所有元素中添加了flex，这将有助于调整它们的大小。除此之外，您应该避免使用.body作为类名，因为它已经是HTML标记，可能会导致您将来出错。

box-sizing: border-box

Answer 2

感谢目前为止的答案。对此，我真的非常感激！但是，我找到了解决问题的方法。我只是在显示后错过了分号：flex in .example layout。 NOOB错误。再次感谢。我下次会更加敏锐。

Answer 3

缺少分号

.example-layout {
  display: flex;
  flex-direction: column;
  height: 300px;
}

如何标记我的css，以便此元素达到其应有的高度

3 个答案: