0

Im using flexbox a lot on my page. Im using it on the 6 images spaced apart which works fine.

This is wrapped in a container (pink background). I want this aligned vertically and horizontally of the window. I got it working fine. Untill i added in my flexbox sticky footer. I cant get them both working at once.

My main issue is safari, getting the sticky footer working in that. i use flex: 1 0 auto; on the .container class.

If i change the value to flex: 1; it centers but then thte footer does not work well in safari

Can anyone shed some light on this. I've never used flexbox before

https://codepen.io/gorelegacy/full/dXzbmK/

Adam G
  • 357
  • 2
  • 6
  • 20

1 Answers1

0

Can you be a bit more precisely? For me it's working just fine in your Codepen. Or is the pink background (which shows some black on large screen) the problem?

One advice, probably not your solution: Flexbox is used to define the layout. I see that you give the body a flex-direction: row, and you give some elements a fixed height. Instead of using 

.bottom {
  height: 40px;
}

I recommend using:

flex: 0 0 40px;

The results are the same, but it could prevent little bugs or weird behaviour in the future. Same goes for your div class=top.

Regarding your problem, try the following:

body {
display: flex;
flex-direction: column;
}

.top {
    flex: 0 0 40px;
}

.content {
    flex: 1;
    overflow-y: scroll;
}

.bottom {
    flex: 0 0 40px;
}

Make sure your .top, .bottom and .content are the only and direct children in your HTML. Otherwise this won't work.

This way the top and bottom bar are fixed, and your content fills up the space inbetween.

EDIT: To vertically align the content within the <div class="content">, you should add this to your css. (Along with the code above)

.content {
    flex: 1;
    overflow-y: scroll; //only if you want fixed footer
    display: flex;
    flex-direction: row; //column should also do fine, since you only have one child element
    justify-content: center;
    align-items: center;
}

.content-inner { //the only and direct child of content
    margin: auto;
}
J.DD
  • 388
  • 2
  • 13
  • sorry for being confusing. i want it the pink content to always be center aligned. like this https://codepen.io/gorelegacy/full/PzKoJk/ try changing the height of your browser. which works in chrome. but not safari Something is conflicting with my flex sticky footer which im using from here - https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ – Adam G Jul 06 '16 at 11:11
  • I've edited my message. Let me know if this is what you are looking for :-) – J.DD Jul 06 '16 at 11:17
  • I'm using safari and in the codepen you provided, the content is aligned in the center. I don't know what's going wrong there? The only thing that goes wrong with safari (versus chrome) is the weird black part of the content when using a bigger screen. – J.DD Jul 06 '16 at 11:19
  • vertically aligned? – Adam G Jul 06 '16 at 11:26
  • Ah, now I know the problem exactly! I will edit my post :) – J.DD Jul 06 '16 at 11:27
  • Let me know if this was what you were looking for! – J.DD Jul 06 '16 at 12:03
  • Just FYI, using *line comment syntax* in CSS is invalid and can result in parsing errors: http://stackoverflow.com/a/34799134/3597276 – Michael Benjamin Jul 06 '16 at 12:15
  • i really appreciate your help @J.DD I tried your solutions. None seems to hit the sweet spot unfortunately, maybe it was my ability to apply it to my project. Im not a fan of the overflow-y for aesthetics reasons – Adam G Jul 06 '16 at 12:44
  • Well, glad to help. I'm sorry it didn't work out! Good luck with finding a solution! If I can help with something, please ask, because flexbox really should be the perfect solution. And fyi, the overflow-y is just when you want a fixed bottom bar. If you don't want the fixed bottom bar, you could remove that part and add `flex: 0 0 100%` or `flex: 0 0 100vh` (or the value you like) to the content. If you do flex: 1, it will automatically adjust the height. And the footer will come right underneath it. – J.DD Jul 06 '16 at 14:02