代码之家 › 专栏 › 技术社区 › TomR

具有中心元素的弹性框,可填充所有可用空间[重复]

flexbox html5 css

-1

TomR · 技术社区 · 7 年前

这个问题已经有了答案:

Make a div fill the height of the remaining screen space 31答

我正在尝试使用以下文档树设计网页(以尽量避免滚动的外观):

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)

显然,弹性盒子是最好的解决方案,但我正在阅读这本漂亮的指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 而且似乎只有有限的选项可以选择如何分配空间(如何分配元素的高度)-有一些“增长”属性,但没有其他属性。我如何才能实现我的目标结构?我没有代码,因为我没有看到必要的CSS属性来制作一个入门示例。

1 回复 | 直到 7 年前

1

4

IvanS95 7 年前

我想这就是你要找的。如果要使用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>