内容页眉和页脚之间的高度为100％

Question

我已经看到很多关于此的问题，但没有一个能让我找到解决这个问题的好办法。它是典型的无滚动介绍页面。标题可以有x个像素，但页脚会响应（在平板电脑和手机中会更高）。我不能让我的包装器在页眉和页脚之间的空间高度为100％，而不会将我的页脚拉到外面，然后将包装内容垂直居中。

任何解决方案？

提前致谢

Answer 1

您可以使用flex boxes。 flex: 1容器将占用尽可能多的空间。

.wrapper {
  display: flex;
  flex-direction: column;
}

.wrapper .content {
  flex: 1;
}

.wrapper .header {
  height: 100px;
}