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

可能不会。

将 position:relative 分配给 #container，然后将 position:absolute; bottom:0; 分配给 #copyright。

#container { 位置：相对； } #copyright { 位置：绝对；底部：0； }

实际上，@User 接受的答案仅在窗口高且内容短的情况下才有效。但是如果内容高而窗口短，它会将版权信息放在页面内容上，然后向下滚动查看内容会给你留下一个浮动的版权声明。这使得该解决方案对于大多数页面（实际上就像这个页面）都无用。

最常见的方法是演示的“CSS 粘性页脚”方法，或者稍微更苗条的变体。这种方法效果很好——如果你有一个固定高度的页脚。

如果你需要一个可变高度的页脚，如果内容太短，它会出现在窗口底部，如果窗口太短，它会出现在内容的底部，你会怎么做？

吞下你的骄傲，使用一张桌子。

例如：

{填充：0；边距：0； } html, 身体 { 高度: 100%; } #container { 高度：100%;边框折叠：折叠； }

试试看。这适用于任何窗口大小、任何数量的内容、任何大小的页脚、每个浏览器……甚至 IE6。

如果您对使用表格进行布局感到畏缩，请花点时间问问自己为什么。 CSS 应该让我们的生活更轻松——总的来说，它确实如此——但事实是，即使经过这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。它不完整。

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

弹性盒方法！

在 supported browsers 中，您可以使用以下内容：

Example Here

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

.parent { 高度：100px;边框：5px 实心#000；显示：弯曲；弹性方向：列； } .child { 高度：40px;宽度：100%；背景：#f00；边距顶部：自动； }

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

Example Here

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

.parent { 高度：100px;边框：5px 实心#000；显示：弯曲； } .child { 高度：40px;宽度：100%；背景：#f00；对齐自我：flex-end； }

作为旁注，您可能需要添加供应商前缀以获得额外支持。

是的您可以在不使用 absolute 定位和不使用 table 的情况下执行此操作（与标记等有关）。

DEMO
经测试可在 IE>7、chrome、FF 和添加到现有布局中是一件非常容易的事情。

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

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

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

它有效地完成了 float:bottom 的工作，甚至解决了@Rick Reilly 的回答中指出的问题！

纯CSS，无绝对定位，无固定高度，跨浏览器（IE9+）

看看Working Fiddle

因为正常流程是“从上到下”，我们不能简单地要求 #copyright div 坚持到他的父母的底部，而没有某种绝对定位，但是如果我们希望 #copyright div 坚持到顶他的父母，这会很简单——因为这是正常的流程方式。

因此，我们将利用这一点作为我们的优势。我们将更改 HTML 中 div 的顺序，现在 #copyright div 位于顶部，内容紧随其后。我们还让内容 div 一直拉伸（使用伪元素和清除技术）

现在只需在视图中反转该顺序即可。这可以通过 CSS 转换轻松完成。

我们将容器旋转 180 度，现在：向上是向下。 （然后我们将内容反转为看起来正常）

如果我们想在内容区域中有一个滚动条，我们需要应用更多的 CSS 魔法。如Here所示[在该示例中，内容位于标题下方-但其想法相同]

{边距：0；填充：0； } html, body, #Container { 高度: 100%;白颜色; } #Container:before { 内容：'';高度：100%；向左飘浮; } #版权所有 { 背景颜色：绿色； } #Stretch { 背景颜色：蓝色； } #Stretch:after { content: '';显示：块；明确：两者； } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-变换：旋转X（180度）； -o-变换：旋转（180度）； -webkit-transform: rotateX(180deg);变换：旋转X（180度）； }

CSS 网格

由于 CSS Grid 的使用越来越多，我想向网格容器内的元素建议 align-self。

align-self 可以包含以下任何值：end、self-end、flex-end，用于以下示例。

#parent { 显示：网格； } #child1 { 对齐自我：结束； } /* 片段的额外样式 */ #parent { height: 150px;背景：#5548B0；颜色：#fff;填充：10px；字体系列：无衬线； } #child1 { 高度：50px;宽度：50px；背景：#6A67CE；文本对齐：居中；垂直对齐：中间；行高：50px； }

为上述 #copyright 的元素创建另一个容器 div。在版权上方添加一个新的 div：<div style="clear:both;"></div> 它将强制 页脚 位于其他所有内容之下，就像使用相对定位 (bottom:0px;) 的情况一样。

尝试这个;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

尽管此处提供的答案似乎都不适用于我的特定情况或在我的特定情况下有效，但我遇到了提供此简洁解决方案的 this article ：

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

我发现它对于将响应式设计应用于移动显示非常有用，而无需重新排序网站的所有 html 代码，将 body 本身设置为表格。

请注意，只有第一个 table-footer-group 或 table-header-group 会这样呈现 ：如果有多个，其他将呈现为 table-row-group。

如果您使用 inline-block 元素的 文本对齐 功能知道 #container 的 height，那么您确实可以在不使用 position:absolute 的情况下将框align 到 bottom。

Here 您可以看到它的实际效果。

这是代码：

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

使用 translateY 和 top 属性

只需将元素子元素设置为位置：相对，然后将其移动到顶部：100%（这是父元素的 100% 高度）并通过变换坚持到父元素的底部：translateY(-100%)（即 -100% 的高度孩子）。

好处

您不会从页面流中获取元素

它是动态的

但仍然只是解决方法:(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

不要忘记旧浏览器的前缀。

CodePen link here。

html，正文 { 宽度：100%;高度：100%； } .overlay { 最小高度：100%;位置：相对； } .container { 宽度：900px;位置：相对；底部填充：50px； } .height { 宽度：900px;高度：50px； } .footer { 宽度：900px;高度：50px；位置：绝对；底部：0； }

如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位就是要走的路。当然，如果版权元素是容器中的最后一个元素，它总是在底部。

你能扩展你的问题吗？准确解释你想要做什么（以及为什么你不想使用绝对定位）？

如果您不知道子块的高度：

#parent { 背景：绿色；宽度：200px；高度：200px；显示：表格单元格；垂直对齐：底部； } .child { 背景：红色；垂直对齐：底部； }

http://jsbin.com/ULUXIFon/3/edit

如果您知道子块的高度，请添加子块，然后添加 padding-top/margin-top：

#parent { 背景：绿色；宽度：200px；高度：130px；填充顶部：70px； } .child { 背景：红色；垂直对齐：底部；高度：130px； }

此外，如果有使用 position:absolute; 或 position:relative; 的规定，您可以随时尝试 padding parent div 或放置 margin-top:x;。在大多数情况下不是一个很好的方法，但在某些情况下它可能会派上用场。

#container{宽度：100%;向左飘浮;位置：相对；} #版权{位置：绝对；底部：0px；左：0px；背景：#F00;宽度：100%；} #container{背景：灰色； height:100px;}

不想在底部使用“位置：绝对”作为粘性页脚。然后你可以这样做：

html, 身体 { 高度：100%;边距：0； } .wrapper { 最小高度：100%； /* 等于页脚的高度 */ /* 但也考虑了最后一个孩子的潜在 margin-bottom */ margin-bottom: -50px; } .footer{ 背景：#000;文本对齐：居中；颜色：#fff; } .footer, .push { 高度：50px; }