Positioning divs inside a parent div

Question

What would be a good way of positioning two divs (green and yellow) inside a parent div (blue outline) so that it looks like in the second drawing below? (First drawing is how divs stack by default).

I have a number of these blue divs whose green divs are variable height (different amount of text) and the yellow divs are always the same.

I want the yellow divs to always be at the bottom of the container. Edit: Forgot to mention that all my blue parent divs should be same height

I tried positioning yellow divs as position:absolute with bottom:0 and blue divs to position:relative but this didn't work because then if one of the green divs has a lot of text it will run into and text will overlap the yellow div;

Blue parent divs are set to height:100%

What am I missing here?

Sorry if newbie question, I'm just getting into CSS and UI design.

Answer 1

If you use flex this will be supereasy -:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 500px;
  border: 2px solid blue;
}

.green {
  flex: 1;
  width: 100%;
  background: green;
}

.white {
  flex: 1;
  width: 100%;
  background: white;
}

.yellow {
  flex: 1;
  width: 100%;
  background: blue;
}

<div class="container">
  <div class="green"></div>
  <div class="white"></div>
  <div class="yellow"></div>
</div>

• In this case we have given flex: 1 for all the divs, so the ratio of all the 3 divs is 1:1:1.

• If you give the value of flex to be 1,2,1 then the ratio will be 1:2:1 i.e. 25%,50%,25% of the total height of container.

Also we need to define height for outer div so that ratio distribution can happen.

Answer 2

You can make use of the flexbox properties. I just set the height for snippet purpose. You can alter the height based on your preference and check the text.

.parent {
  display: flex; /* Activate Flexbox container */
  flex-direction: column; /* To set the main axis in block direction */
  justify-content: space-between; /* Align them distributed equally from first to last */
  height: 150px;
  width: 200px;
  border: 5px solid #00A2E8;
}

.child1 {
  background: green;
  height: 25%;
}

.child2 {
  background: yellow;
  height: 25%;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Answer 3

Assuming the yellow div is a fixed height this is pretty easy

.parent {
  /*Children will be positioned relative to this*/
  position: relative;
  /*Allow to be > 100% if content requies it*/
  /*154 = height of yellow div + border*/
  min-height: calc(100vh - 154px);
  /*Height of yellow div*/
  padding-bottom: 150px;
  border: 2px solid blue;
  /*The following is purely for demo purposes*/
  width: 25%;
  display: inline-block;
  vertical-align: top;
}


/*The Green div is pretty standard*/

.green {
  background-color: green;
  color: white;
}

.yellow {
  background-color: yellow;
  /*Fixed height*/
  height: 150px;
  /*Set to postion absolute - relative to parent*/
  position: absolute;
  /*Set bottom to bottom of parent*/
  bottom: 0;
  /*Giv it a width*/
  width: 100%
}


/*Tweak margins for first and last paragrpahs*/

.green p:first-of-type {
  margin-top: 0;
}

.green p:last-of-type {
  margin-bottom: 0;
}

body {
  margin: 0
}

<div class="parent">
  <div class="green">
    <p>Some text</p>
  </div>
  <div class="yellow">
   
  </div>
</div>

<div class="parent">
  <div class="green">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nibh justo, tincidunt sed elementum id, dictum quis nunc. Pellentesque et sodales mi.
    </p>
  </div>
  <div class="yellow">

  </div>
</div>

<div class="parent">
  <div class="green">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nibh justo, tincidunt sed elementum id, dictum quis nunc. Pellentesque et sodales mi. Mauris luctus leo ac eros tempor, quis gravida leo pellentesque. Etiam odio nisl, lobortis ut elit
      ut, mollis eleifend ex. Etiam et risus at diam iaculis sagittis. Pellentesque porttitor odio suscipit, fringilla odio et, laoreet lectus. Nunc tincidunt ultrices condimentum. Nulla sit amet ante posuere, convallis justo vitae, facilisis orci. In
      congue egestas diam vitae fermentum. Vivamus efficitur ligula sed tincidunt blandit. Etiam feugiat egestas sem ut pellentesque. Nulla ac dui bibendum, finibus mi vitae, suscipit quam.
    </p>
    <p>
      Etiam pellentesque, diam eget condimentum rutrum, odio orci ultrices eros, in tincidunt magna tortor id augue. Nunc vitae dolor a risus egestas hendrerit a et augue. Pellentesque rhoncus lacus elit, at laoreet dolor pretium condimentum. Sed egestas placerat
      ante, in convallis arcu facilisis id. Sed nec rutrum velit. Fusce eget sem turpis. Nulla facilisi. Nam suscipit ante leo, non viverra mauris ultrices id. Donec dui ligula, aliquet sed risus vitae, mollis posuere est. Aenean elementum, libero quis
      fermentum dictum, sem lacus volutpat orci, quis rutrum ante odio eleifend risus. Nullam placerat et lacus in sagittis. Suspendisse potenti. Maecenas ullamcorper cursus ligula sit amet ullamcorper.
    </p>
  </div>
  <div class="yellow">

  </div>
</div>