如何将我的 div 放在其容器的底部? [英] How can I position my div at the bottom of its container?

问题描述

Given the following HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?

解决方案

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

---

The solution above is probably more flexible, however, here is an alternative solution:

Example Here

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

---

As a side note, you may want to add vendor prefixes for additional support.

这篇关于如何将我的 div 放在其容器的底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！