Question

我正在尝试使用以下文档树设计网页（以尽可能避免出现滚动条）：

html 
  head
  body
    div (flex-box - height 100%)
      header (flex-child - fixed height)
      main (flex-child - consumes all the remainig space/height)
      footer (flex-child - fixed height)

显然，flex-box是最好的解决方案，但是我正在阅读这份不错的指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/，看来如何分配空间（如何分配元素的高度）只有有限的选择-是一些“增长”属性，但仅此而已。我如何制定我要实现的结构？我没有代码，因为我什至没有看到制作入门示例所需的CSS属性。

Answer 1

我想这就是您要寻找的。如果要使用flex，可以将其方向设置为column，并将容器的height设置为100vh，然后将flex-grow属性设置为页面，以便使用剩余空间。

更好地全屏观看

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background: red;
  height: 40px;
}

.body {
  flex-grow: 1;
  background: green;
}

footer {
  background: blue;
  height: 40px;
}

<div class="container">
  <header>

  </header>
  <div class="body">

  </div>
  <footer>

  </footer>
</div>

Flex-box的中央元素可填充所有可用空间

1 个答案: