- This topic is empty.
December 9, 2015 at 3:25 pm #235753
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.
Any help would be much appreciated.December 9, 2015 at 8:07 pm #235754
Does this help?
Can’t see your pen, BTW.
I used a second “outer” flex-container in
bodyfor that), but I also had to set
100%.December 9, 2015 at 11:24 pm #235759
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.December 10, 2015 at 12:48 am #235770
Damn it – in Iceweasel/Firefox they do! And they should:
“The element behaves like a block element and lays out its content according to the flexbox model.”
display – CSS | MDN
So, setting the
.navclass’s height to 100% should work (the
navelement does grow to the bottom).
But in Chromium/Chrome, indeed they don’t! And here I thought flexbox was safe in modern browsers …December 10, 2015 at 1:29 am #235771
But: Making the
navelement itself display
flex-grow), does seem to work in Chromium, as well:
This is starting to look less than super simple, though …
Maybe one could simplify somewhere – give it a try!December 10, 2015 at 2:34 am #235772
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
5remand it seemed to work just fine (corrected to
flex-basisin the second pen).December 10, 2015 at 10:22 am #235789December 11, 2015 at 2:19 am #235794Gary PicklesParticipant
Is this more what your wanting, changed the rem to vh units in this penDecember 11, 2015 at 1:57 pm #235810
Thank you so much Gary. That is exactly what I was looking for. Really appreciate the help and use of VHDecember 11, 2015 at 9:48 pm #235812
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-heightfor the wrapper and also made it
display: flexas a
column– mo’ flex, mo’ better ;) Then, set
flex-growto 8 and 2 for
.navigation, respectively (instead of the
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).December 14, 2015 at 7:18 am #235832Gary PicklesParticipant
That’s lot a lot cleaner, Nice one Valentin
- The forum ‘CSS’ is closed to new topics and replies.