Question

我正在尝试https://stackoverflow.com/a/22218694/1175080所述的以下解决方案。

或者，与仅通过容器对齐内容时，flexbox也可以将弹性项与auto margin 对齐Flex容器中的一个flex项目（如上面问题中给出的示例）。

这是我的解决方案。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
  main {
      display: flex;
      height: 100%;
      background: lightgreen;
  }

  section {
      margin: auto;
      background: yellow;
  }
</style>
</head>
<body>
  <main>
      <section>Foo</section>
  </main>
</body>
</html>

＆＃13;

它似乎不起作用。 main元素不会展开以占据页面的100％高度。我究竟做错了什么？怎么能这样做？

Answer 1

分配html, body 100％宽度＆amp;身高，喜欢：

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

请看下面的代码段：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
main {
    display: flex;
    height: 100%;
    background: lightgreen;
}

section {
    margin: auto;
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<main>
    <section>Foo</section>
</main>
</body>
</html>

希望这有帮助！

Answer 2

已使用height:100vh

body {
  min-height: 100vh;
  margin: 0;
}
main {
  display: flex;
  height: 100vh;
  background: lightgreen;
}

section {
  margin: auto;
  background: yellow;
}

<main>
    <section>Foo</section>
</main>

Answer 3

主要元素将使用由其父母分配的空间，在这种情况下，主体是＆gt; HTML。因此，将body和html设置为100％的高度，你应该是金色的。

 html, body {
    height: 100%;
 }

如何使用CSS flex使元素占据页面的100％并将元素置于其中？

3 个答案: