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

给定以下 HTML：

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

我想坚持.我可以在不使用绝对定位的情况下实现这一点吗？#copyright#container

分割线

网友回答：

应该不会。

分配给，然后分配给。position:relative#containerposition: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本应让我们的生活更轻松——总的来说，它确实如此——但事实是，即使经过这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。这是不完整的。

表格并不酷，但至少就目前而言，它们有时是解决设计问题的最佳方式。

分割线

网友回答：

弹性框方法！

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

这里的例子

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

作为旁注，您可能希望添加供应商前缀以获得其他支持。

模板简介：该模板名称为【HTML 如何将我的 div 放置在容器的底部？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。