如何将我的 div 放在容器的底部?

新手上路,请多包涵

给定以下 HTML:

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

我想 #copyright 坚持到 #container 的底部。我可以在不使用绝对定位的情况下实现吗?

原文由 Dónal 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 441
2 个回答

弹性盒方法!

支持的浏览器 中,您可以使用以下内容:

这里的例子

.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>

上面的解决方案可能更灵活,但是,这里有一个替代解决方案:

这里的例子

.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>

作为旁注,您可能希望添加供应商前缀以获得额外支持。

原文由 Josh Crozier 发布,翻译遵循 CC BY-SA 4.0 许可协议

可能不会。

#copyright position:relative #container position:absolute; bottom:0;


 #container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
 <div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

原文由 User 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题