Flexbox stick item to bottom

Question

I have the following layout.

<div class="container">
   <div class="content">          
       <div class="post">post</div>
       <div class="image">image</div>      
   </div>
   <div class="footer">footer</div>    
</div>

http://jsbin.com/xicatoq/4/edit?html,css,output

The thing I want to achieve is to make the footer stick to the bottom (I don't want to use absolute positioning) and make the .content stretch from the top to the footer, like in the image below.

Can someone explain how I can achieve this?

Possible duplicate of [Align an element to bottom with flexbox](http://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) — Robert, Apr 08 '16 at 11:47

score 3 · Answer 1 · edited May 23 '17 at 11:45

In your code, the div with class content is a flex container. That makes the child elements (.post and .image) flex items.

However, your div with class container is not a flex container. So .content and .footer are not flex items, and cannot accept flex properties.

So, first step, add this:

.container {
     display: flex;
     flex-direction: column;
}

Then use flex auto margins to stick the footer to the bottom of the container:

.footer {
    margin-top: auto;
}

Here's the full code:

body {
  font-family: monospace;
  color: #fff;
  text-align:center;
}
.container {
  width: 100%;
  height: 800px;
  background: red;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}
.content {
  /* float: left; */
  width: 100%;
  display: flex;
  align-items: center;
}
.post {
  width: 70%;
  background: pink;
  line-height: 300px;
}
.image {
  width: 30%;
  height: 500px;
  background: green;
}
.footer {
  background: blue;
  line-height: 70px;
  text-align: center;
  /* float: left; */
  width: 100%;
  margin-top: auto;     /* NEW */
}

<div class="container">
   <div class="content">
       <div class="post">post</div>
       <div class="image">image</div>
   </div>
   <div class="footer">footer</div>
</div>

Revised Demo

Note that I commented out the floats. They aren't working. In a flex container floats are ignored.

Learn more about auto margins here: https://stackoverflow.com/a/33856609/3597276

score 1 · Answer 2 · answered Apr 08 '16 at 12:54

Check this : http://jsbin.com/dojitevoye/edit?html,css,output

body {
  font-family: monospace;
  color: #fff;
  text-align:center;
}

.container {
  width: 100%;
  height: 800px;
  background: red;
}

.content {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.post {
  width: 70%;
  background: pink;
  line-height: 300px;
  align-self: flex-start;
}

.image {
  width: 30%;
  height: 500px;
  background: green;
  align-self: flex-start;
}

.footer {
  background: blue;
  line-height: 70px;
  text-align: center;
  float: left;
  width: 100%;
  align-self:flex-end;
}

Set the height for the .content class to 100%, which will take the height of it's parent ( which is .container ), which will be 800px in this case.

Now align both .post and .image to the top of the parent flexbox with align-self: flex-start;

Now, similarly set the .footer to the bottom of flexbox using align-self:flex-end;

score 0 · Answer 3 · answered Apr 08 '16 at 11:57

0

Just use height: 100%; to .content will make footer stick to bottom.

Working JSBin

answered Apr 08 '16 at 11:57

ketan

19,129
42
60
98

1

Yeah, this works. It may not be a preferred solution (that's up to the OP), but it gets the job done. No reason to downvote. I'll balance it out. – Michael Benjamin Apr 08 '16 at 15:19

Flexbox stick item to bottom

3 Answers3

Revised Demo