CODEWITHSUNDEEP
htmlcssflexbox
Hiero
Hiero

Reputation: 2205

Flexbox stick item to bottom

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?

enter image description here

Upvotes: 1

Views: 2478

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371889

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

Upvotes: 3

Arjun S Kumar
Arjun S Kumar

Reputation: 376

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;

Upvotes: 1

ketan
ketan

Reputation: 19341

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

Working JSBin

Upvotes: 0

Related Questions