Create flexbox menu that takes up rest of vertical space of browser window

[[email protected]]

I’m trying to make the 3 menu items in this codepen take up the vertical space of the browser window that is below them then stack on mobile or a breakpoint. Basically the logo takes up a portion of the browser height and the footer menu takes up the rest of it on all screen sizes.

Screenshot to illustrate: http://d.pr/i/1fCj8

I thought flexbox would be a good way to do this but I’m stuck.

http://codepen.io/charlieussery/pen/XmNGWG

Any help would be much appreciated.

[Valentin Born]

Does this help?
Can’t see your pen, BTW.
I used a second “outer” flex-container in column direction (misused body for that), but I also had to set html to 100% height and body to min-height of 100%.

[[email protected]]

those don’t fill the browser window to the bottom. maybe this screenshot will help illustrate better: http://d.pr/i/1emV8

unless I’m missing something from your answer I don’t think that will work. thank you though.

[Valentin Born]

Damn it – in Iceweasel/Firefox they do! And they should:
display: flex;
“The element behaves like a block element and lays out its content according to the flexbox model.”
display – CSS | MDN
So, setting the .nav class’s height to 100% should work (the nav element does grow to the bottom).
But in Chromium/Chrome, indeed they don’t! And here I thought flexbox was safe in modern browsers …

[Valentin Born]

But: Making the nav element itself display flex (and the .nav class flex-grow), does seem to work in Chromium, as well:
Pen
This is starting to look less than super simple, though …
Maybe one could simplify somewhere – give it a try!

[Valentin Born]

But now I have a question (concerning above pens, so I will attach to this thread): As a flex item, shouldn’t the header be unaffected by height?! In the first pen, I had set its height to 5rem and it seemed to work just fine (corrected to flex-basis in the second pen).

[[email protected]]

good question. I would think the same thing. How would I make it so that the logo takes up 80% of the browser window, like my example: http://codepen.io/charlieussery/pen/XmNGWG

If I increase the rem on the header it does this: http://codepen.io/charlieussery/pen/WrvyVz

[Gary Pickles]

Is this more what your wanting, changed the rem to vh units in this pen

http://codepen.io/Garypickles/full/vLOabp/

[[email protected]]

Thank you so much Gary. That is exactly what I was looking for. Really appreciate the help and use of VH

[Valentin Born]

Nicely done, Gary! If this is exactly what you want, cool – but in vertically challenged viewports, it might look less then ideal …
So I forked Gary’s pen and added a min-height for the wrapper and also made it display: flex as a column – mo’ flex, mo’ better ;) Then, set flex-grow to 8 and 2 for .header and .navigation, respectively (instead of the vhs):
http://codepen.io/valentinborn/pen/JGYKBK
This vertical scrolling in (vertically) smaller viewports was also a feature of your original pen (which I was now able to see on codepen directly).

[Gary Pickles]

That’s lot a lot cleaner, Nice one Valentin

[Author]

Posts