如何将 div 放置在其容器的底部？

鉴于以下 HTML：

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

我希望#copyright #container的底部。我可以在不使用绝对定位的情况下实现这一目标吗？

html css

可能不会。

分配position:relative对于#container ，然后position:absolute; bottom:0;到#copyright 。

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

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

最常用的方法是演示的 “CSS 粘性页脚” 方法，或者稍微更苗条的变体。如果您的页脚高度固定，则此方法效果很好。

如果您需要一个可变高度的页脚，如果内容太短会显示在窗口的底部，而如果窗口太短会显示在内容的底部，该怎么办？

吞下自己的骄傲并使用桌子。

例如：

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

试试看。在任何浏览器甚至 IE6 上，它都适用于任何窗口大小，任何内容量，任何页脚。

如果您不愿意使用表格进行布局，请花一秒钟时间问自己为什么。 CSS 本来应该使我们的生活更轻松 - 并且总体上来说 - 但事实是，即使这些年来，它仍然是残破的，违反直觉的混乱。它不能解决所有问题。这是不完整的。

表不是很酷，但是至少目前来说，它们有时是解决设计问题的最佳方法。

flexbox 的方法！

在受支持的浏览器中，您可以使用以下内容：

这里的例子

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

附带说明，您可能需要添加供应商前缀以提供其他支持。

协慌网

如何将 div 放置在其容器的底部？

答案

flexbox 的方法！