CSS定位在底部没有绝对定位[关闭]答案

【问题标题】：CSS positioning at the bottom without absolute positioning [closed]CSS定位在底部没有绝对定位[关闭]
【发布时间】：2017-02-14 11:09:44
【问题描述】：

如何在不使用“绝对”定位的情况下定位元素，使其始终位于容器底部？我有一个包含 2 个元素的容器，其中一个是文本描述，因此它可以和文本一样大。我想将第二个元素放置在页面底部，无论前一个 div 中的文本是否为空，如果文本不为空，我希望它们之间有 10px 的填充

【问题讨论】：

加载小提琴
请发布足够的代码来创建一个最小的示例，以便我们为您提供帮助。
另外请解释一下为什么绝对定位对您来说不是一个好的解决方案。
@hunter jsfiddle.net/ec7qxtfr 这是我的代码。即使描述为空，我也想将 btn-container 放在底部。如果描述不为空，我希望它与描述相距 10 px。绝对不是解决方案，因为那样我不能在带有描述的 div 的末尾和 btn-container div 之间添加一些填充
@ZoliSzabo 我想将 btn-container 放在底部，即使描述为空。如果描述不为空，我希望它与描述相距 10 px。绝对不是解决方案，因为那样我不能在带有描述的 div 的末尾和 btn-container div 之间添加一些填充

标签： html css

【解决方案1】：

更新：将 flexbox 应用于您的代码的 JSFiddle。

https://jsfiddle.net/ec7qxtfr/1/

flexbox 可以帮助您实现这一目标。将以下内容添加到您的父容器中。

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

下一位是您想要的 10px 填充。这将针对容器内的第一个子元素。

.child:first-child {
  padding-bottom: 10px;
}

只要第一个孩子div 存在，即使你没有任何内容（没有段落），第二个div 仍然会被flexbox 推到容器底部。同样，您可以注释掉height 属性以验证padding 是否存在于两个子元素之间。

查看下面的 JSFiddle。您可以在父容器中调整高度，以确认第二个 div 停留在容器底部。

https://jsfiddle.net/o3r40keu/5/

注意：此解决方案将假定您在此特定父容器内只有两个子元素。

我希望这会有所帮助！

【讨论】：

【解决方案2】：

你可以使用弹性盒子。如果您将容器设置为

.container-class {
  display: flex;
  flex-direction: column;
}

然后您可以将孩子的边距顶部设置为auto。

.child {
  margin-top: auto;
}

HTML 可能如下所示：

 <section class="container-class">
   <p class="child">...</p>
 </section>

您可能需要在容器上设置一定的高度才能使其工作，但解决方案的要点是在要粘在底部的元素上使用 flexbox + margin-top: auto。您想要实现的填充和其他样式应该按预期工作，没有技巧。

请注意，您需要为 flexbox 属性添加前缀，即：

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
  -ms-flex-direction: column;
      flex-direction: column;

【讨论】：

逛了好久，终于搞定了。谢谢:)