Push an element to the bottom of its parent without overlapping?

Question

I have an element that extends across at least the entire vertical viewport (min-height 100vh). This item has two children, a menu item (basically a formatted list of links) and another item.

I would like to click the last element on the bottom of the parent without overlapping the menu, as a result of changing the resolution.

I am currently using the absolute position solution https://codepen.io/anon/pen/WGpyYa . But it turns out that the “red” element may overlap the menu in some configuration.

HTML and CSS code:

* {
  margin: 0;
}
.parentContainer {
  min-height: 100vh;
  background-color: yellow;
  position: relative;
}
.pushBottom {
  width: 200px;
  height: 300px;
  background-color: red;
  position: absolute;
  bottom: 0;
}

<div class="parentContainer">
  <ul>
    <li>foobar</li>
    <li>foobar</li>
    <li>foobar</li>
  </ul>
  <div class="pushBottom">
  </div>
</div>

Run codeHide result

How could you make a red element at the bottom of the parent "yellow" without overlapping the menu?

Thank!

Answer 1

, flexbox :

• red.

• display: flex pushBottom flex-direction: column .

• justify-content: space-between, pushBottom .

* {
  margin: 0;
}
.parentContainer {
  min-height: 100vh;
  background-color: yellow;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pushBottom {
  width: 200px;
  height: 300px;
  background-color: red;
}

<div class="parentContainer">
  <ul>
    <li>foobar</li>
    <li>foobar</li>
    <li>foobar</li>
  </ul>
  <div class="pushBottom">
  </div>
</div>

Hide result

. !