内容100％页眉和页脚之间的高度 [英] Content 100% height between header and footer

问题描述

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

任何解决方案？

预先感谢

您可以使用 / CSS_Flexible_Box_Layout / Using_CSS_flexible_boxesrel =nofollow noreferrer>弹出框。 flex：1 容器会占用尽可能多的空间。

  .wrapper {
 display：flex; 
 flex-direction：column; 
} 
 
 .wrapper .content {
 flex：1; 
} 
 
 .wrapper .header {
 height：100px; 
} 
  

I've been seeing a lot of questions about this, but none of them got me a nice solution to this problem. It's the typical no scroll intro page. The header can have x pixels but the footer is gonna be responsive (will be taller in tablets and mobiles). I can't really get my wrapper to be 100% height of the space between header and footer without pulling my footer outside and then centering vertically the content in the wrapper.

Any solution?

Thanks in advance

解决方案

You can use flex boxes. flex: 1 container will take as much space as it can.

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

.wrapper .content {
  flex: 1;
}

.wrapper .header {
  height: 100px;
}

这篇关于内容100％页眉和页脚之间的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！