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

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

flexbox html5 css

-1

TomR · 技术社区 · 5 年前

这个问题已经有了答案:

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 回复 | 直到 5 年前

IvanS95 5 年前

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

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前