0

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

enter image description here

Jorge Garcia
  • 15
  • 5

1 Answers1

2

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;
}
zurfyx
  • 31,043
  • 20
  • 111
  • 145