Equal height divs fit into viewport


#1

Hello there,

I cannot figure this out. I am trying to have 4 equally height’d divs fit into the viewport but they are always +/- 1px off. Is this a limitation of dividing by 4? Can I solve this? I’ve seen other mobile applications use this pattern. I guess they just deal with the imperfect divs?


#2

Why don’t you use flexbox


#3

Will flexbox give me the pixel perfect? I just want the 4 divs to be exact. I know this is difficult because mobile devices have differing viewport heights and not all heights are divisible by 4.


#4

#5

Thanks for this. It still contains off-by-1 if you observe the height using inspect element. That is okay though I guess I’ll just deal with it


#6

@yurinondual this doesn’t appear to work on iOS 8 - the divs collect at the top instead of taking up the screen. It works fine on my Android 5.1. For quick testing, it works in my Chrome browser. It doesn’t work on my desktop’s Safari browser… any thoughts? Thx.


#7

Never mind… I figured it out… Safari (including iOS 8) still treats the flex functionality as experimental so you have to use the ‘-webkit-’ vendor prefix.

Here’s what fixed it for anyone else who has the same problem:

.holder{
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: column;
  flex-direction: column;

  height: 100%;
}

.child {
  border: none;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}