Vertical centring but also keeping top and bottom sticky when a window gets shrunk

Question

How is it possible to accomplish this css problem below?

This is when a screen has enough space to keep elements viewable.

But once the window gets shrunk and doesn't have enough space to keep them viewable in the original size, top and bottom elements stick to the vertical side in the original size, and only the middle element gets shrunk.

I'm stuck in this status. It looks almost close to the answer at glance but it's actually not...

http://embed.plnkr.co/AJXYCGEVzMPt1My0xehA/

Stack snippet

/* Styles go here */

.wrapper {
  height: 100vh;
}

.top {
  width: 40%;
  height: 50px;
  background-color: green;
}

.middle {
  width: 90%;
  height: 300px;
  background-color: blue;
  margin-top: 30px;
  margin-bottom: 30px;
}

.bottom {
  width: 20%;
  height: 50px;
  background-color: red;
}

<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    
    <div class="wrapper d-flex flex-column align-items-center justify-content-center">
      <div class="top col-auto">Top Element</div>
      <div class="middle col-auto">Middle Element</div>
      <div class="bottom col-auto">Bottom Element</div>
    </div>

Facundo Corradini · Answer 1 · 2018-02-17T05:29:05.893

1

If I understand correctly what you're trying to do, flex is the way.

Just set a flex-container with the max height (with an actual height property, don't use max-height or it's flex items won't be able to grow, and the one in the middle won't display at all), then set the bottom and top elements as flex:0 0 100px so they won't grow / shrink, and allow the middle element to grow and shrink with flex: 1 1 auto;

And set the body itself as a flex-container too, so the flex-container is also a flex-item that can be easily centered with justify-content

actual working version: https://embed.plnkr.co/pajfCNCacQX6kuBf6I8z/

Here's a SO snippet... can't be resized so not usable to test, but just to keep the code safe:

body{
  height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.container{
  display:flex;
  flex-direction:column;
  height: 500px;
}

.top{
  background:CornflowerBlue;
  flex: 0 0 50px;
}

.center{
  flex:1 1 auto;
  margin:10px 0;
  background:salmon;
}

.bottom{
  flex: 0 0 50px;
  background:MediumSeaGreen ;
}

<body>
    <div class="container"> 
      <div class="top">
      </div>
      <div class="center">
      </div>
      <div class="bottom">
      </div>
    </div>
  </body>

edited Feb 17 '18 at 05:29

answered Feb 17 '18 at 05:11

Facundo Corradini

3,825
9
24

Thanks for your reply! I felt @Bhuwan's solution is much simpler but this also works when I add `overflow: scroll` to the middle element when none of child element has its height. Anyway, appreciate your help :) – Ryo Ikarashi Feb 17 '18 at 06:27
Since you didn't use Bootstrap your answer miss how it affects the layout with the used built in classes. The main reason OP's solution doesn't work is the `justify-content-center` on the `wrapper`, which I explained in my answer. Also, your `flex: 1 1 auto` will always make the `center` fill the height of the `container`, which, as you can see in the posted image, it shouldn't. – Asons Feb 17 '18 at 08:52
@LGSon wut?? In the image it looks like it needs to fill the height of the container, and the container should grow up to a certain point, after which it should stay centered. – Facundo Corradini Feb 17 '18 at 16:54
1

@RyoIkarashi both solutions do exactly the same thing in exactly the same way (despite minor syntax changes), only difference is mine has an extra container with a "max"height and flex on the body to keep the container centered, since your first image has grey spaces above and bellow the top and bottom items. – Facundo Corradini Feb 17 '18 at 20:11

Bhuwan · Answer 2 · 2018-02-17T06:35:24.897

1

You will need to use flex-shrink:0 to the top and middle div so that they won't shrink when you resize the viewport

Fiddle Link ▸

Stack Snippet

body {
  margin: 0;
}

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.top,
.bottom {
  margin: 0 30px;
  flex-shrink: 0;
  background: red;
}

.middle {
  background: blue;
  overflow: auto;
}

<div class="parent">
  <div class="item top">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="item middle">. Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur
    ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem.</div>
  <div class="item bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem.</div>
</div>

edited Feb 17 '18 at 06:35

answered Feb 17 '18 at 05:39

Bhuwan

16,525
5
34
57

Thanks for the quick reply! Although your code works great, it just works when each child element has its height. When none of every child has height explicitly specified, the code above doesn't work. Example here. https://fiddle.jshell.net/bhuwanb9/g79gjL2j/1/ Do you know any fixes for this? – Ryo Ikarashi Feb 17 '18 at 06:16
1

I found a solution just by editing a bit of your code. I added `overflow: scroll` to the middle element and now it works like a charm! I really appreciate your help :) https://fiddle.jshell.net/g79gjL2j/10/ – Ryo Ikarashi Feb 17 '18 at 06:24
@RyoIkarashi Sorry I just saw your both comment...I added the height for visual..it is obvious that the height of the `div` depend on the content inside....`overflow:auto` will help...edited my answer.... – Bhuwan Feb 17 '18 at 06:35
@RyoIkarashi and Bhuwan: The problem here is that OP already has `flex-shrink: 0` on the top/bottom element, by its `col-auto`, though since you didn't use Bootstrap your answer miss that part. The main reason OP's solution doesn't work is the `justify-content-center` on the `wrapper`, which I explained in my answer. – Asons Feb 17 '18 at 08:47
@LGSon actually at starting OP didn't post his plucker link of code...so didn't have any idea that OP using bootstrap4...I just saw that OP also used the `twitter-bootstrap` tag.:)... – Bhuwan Feb 17 '18 at 09:52

Vertical centring but also keeping top and bottom sticky when a window gets shrunk

2 Answers2