小开

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

你能详细解释一下你的问题吗？准确地解释你想做什么（以及为什么你不想使用绝对定位）？

小开

可能不会。

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

小开

试试这个；

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

小开

最常见的方法是演示的“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本应让我们的生活更轻松-总体而言，它确实如此-但事实是，即使经过这么多年，它仍然是一个破碎的，违反直觉的混乱。它不能解决所有问题。它是不完整的。

表格并不酷，但至少现在，它们有时是解决设计问题的最佳方式。

小开

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

小开

在CSS中没有称为float:bottom的东西。最好的方法是在这种情况下使用定位：

position:absolute;bottom:0;

小开

如果你知道#container的height使用inline-block元素的文本对齐特性，你确实可以align框到bottom而不使用position:absolute。

这里你可以看到它在行动。

这是代码：

#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;}

小开

只是因为这一点根本没有被提及，在像你这样的情况下通常效果很好：

将版权div之后放在容器div中

您只需要以与其他容器类似的方式格式化版权div（相同的整体宽度、居中等），一切都很好。

css：

#container, #copyright {width: 1000px;margin:0 auto;}

超文本标记语言：

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

唯一不理想的情况是当你的容器div声明为height:100%时，用户需要向下滚动才能查看版权。但即使如此，你仍然可以解决（例如margin-top:-20px-当版权元素的高度为20px时）。

没有绝对定位
没有表格布局
没有疯狂的css，在其他浏览器中看起来不同（至少IE，你知道）
简单明了的格式

旁白：我知道OP要求的解决方案是"…粘贴到'容器'div的底部…"，而不是下面的东西，但是来吧，人们在这里寻找好的解决方案，这是一个！

小开

CodePen链接这里

html, body {width: 100%;height: 100%;}
.overlay {min-height: 100%;position: relative;}
.container {width: 900px;position: relative;padding-bottom: 50px;}
.height {width: 900px;height: 50px;}
.footer {width: 900px;height: 50px;position: absolute;bottom: 0;}

<div class="overlay"><div class="container"><div class="height">content</div></div>
<div class="footer">footer</div></div>

小开

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

小开

这是一种方法，旨在使具有已知高度和宽度（至少大约）的元素向右浮动并保持在底部，同时对其他元素表现为内联元素。它专注于右下角，因为你可以通过其他方法轻松地将其放置在任何其他角落。

我需要制作一个导航栏，它的右下角会有实际的链接，以及随机的兄弟元素，同时确保栏本身正确拉伸，而不会破坏布局。我使用了一个“阴影”元素来占用导航栏的链接空间，并将其添加到容器子节点的末尾。

<!DOCTYPE html><div id="container"><!-- Other elements here --><div id="copyright">Copyright Foo web designs</div><span id="copyright-s">filler</span></div>
<style>#copyright {display:inline-block;position:absolute;bottom:0;right:0;}#copyright-s {float:right;visibility:hidden;width:20em; /* ~ #copyright.style.width */height:3em; /* ~ #copyright.style.height */}</style>

小开

有你可以在没有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+）

看看这个工作小提琴

因为正常的流程是“自上而下”的，我们不能简单地要求#copyright div在没有某种绝对定位的情况下坚持他的父节点的底部，但是如果我们想让#copyright div坚持他的父节点的顶部，这将是非常简单的-因为这是正常的流程方式。

所以我们将利用这一点。我们将更改超文本标记语言中div的顺序，现在#copyright div位于顶部，内容立即跟随它。我们还使内容div一直延伸（使用伪元素和清除技术）

现在它只是在视图中反转该顺序的问题。这可以很容易地用CSS转换完成。

我们将容器旋转180度，现在：向上-向下。（我们反转内容再次看起来正常）

如果我们想在内容区域内有一个滚动条，我们需要应用更多的CSS魔法。可以显示<强>这里[在该示例中，内容在标题下方-但它是相同的想法]

* {margin: 0;padding: 0;}
html,body,#Container {height: 100%;color: white;}
#Container:before {content: '';height: 100%;float: left;}
#Copyright {background-color: green;}
#Stretch {background-color: blue;}
#Stretch:after {content: '';display: block;clear: both;}
#Container,#Container>div {-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-o-transform: rotate(180deg);-webkit-transform: rotateX(180deg);transform: rotateX(180deg);}

<div id="Container"><div id="Copyright">Copyright Foo web designs</div><div id="Stretch"><!-- Other elements here --><div>Element 1</div><div>Element 2</div></div></div>

小开

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

#parent {background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}.child {background:red;vertical-align:bottom;}

<div id="parent"><div class="child">child</div></div>

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

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

#parent {background:green;width:200px;height:130px;padding-top:70px;}.child {background:red;vertical-align:bottom;height:130px;}

<div id="parent"><div class="child">child</div></div>

小开

也许这对某人有帮助：您可以始终将div放在另一个div之外，然后使用负边距将其向上推：

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">Hello!</div><div id="copyright" style="margin-top: -20px;">Copyright Foo web designs</div>

小开

虽然这里提供的答案似乎都不适用于我的特定情况，但我遇到了这篇文章，它提供了这个简洁的解决方案：

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

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

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

小开

最佳答案

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>

作为补充说明，您可能希望添加供应商前缀以获得额外的支持。

小开

使用translateY和top属性

只需将元素孩子设置为位置：相对，然后将其移到顶部：100%（即父级的100%高度），并通过转换：translateY（-100%）（即子级高度的-100%）粘贴到父级的底部。

福利

你不要从页面流中获取元素
它是动态的

但仍然只是解决方法：（

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

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

小开

 #container{width:100%; float:left; position:relative;}#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}#container{background:gray; height:100px;}

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

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

小开

对于容器中只有一个子级的情况，您可以使用table-cell和vertical-align方法，该方法可以可靠地将单个div定位在其父级的底部。

请注意，使用table-footer-group作为提到的其他答案将打破父table的高度计算。

#container {display: table;width: 100%;height: 200px;}#item {display: table-cell;vertical-align: bottom;}

<div id="container"><div id="item">Single bottom item</div></div>

小开

CSS网格

由于CSS Grid的使用正在增加，我想建议#0到网格容器内的元素。

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

#parent {display: grid;}
#child1 {align-self: end;}
/* Extra Styling for Snippet */
#parent {height: 150px;background: #5548B0;color: #fff;padding: 10px;font-family: sans-serif;}
#child1 {height: 50px;width: 50px;background: #6A67CE;text-align: center;vertical-align: middle;line-height: 50px;}

<div id="parent"><!-- Other elements here --><div id="child1">1</div>
</div>

小开

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

 html,body {height: 100%;margin: 0;}.wrapper {min-height: 100%;/* Equal to height of footer *//* But also accounting for potential margin-bottom of last child */margin-bottom: -50px;}.footer{background: #000;text-align: center;color: #fff;}.footer,.push {height: 50px;}

<html><body><!--HTML Code--><div class="wrapper"><div class="content">content</div><div class="push"></div></div><footer class="footer">test</footer></body></html>

小开

根据：w3schools.com

具有位置的元素：绝对；相对于最近定位的祖先（而不是相对于视口，像固定的）。

因此，您需要将父元素定位为相对或绝对等，并将所需元素定位为绝对，然后将底部设置为0。

小开

这个具体场景的解决方案：

将内部元素放在父元素的底部。父元素的高度由其“最高”兄弟元素的高度设置

设置：

我有一个有多个<div class="container">的行
这些<div class="container">在另一个<div class="supercontainer">中彼此相邻
每个<div class="container">都有3个内部div：<div class="title">、<div class="content">、<div class="footer">

期望的结果：

所有<div class="container">都有相同的高度。高度没有在px中定义，它将是其中“最高”的高度。
<div class="title">应该在<div class="container">的顶部
<div class="content">应该放在<div class="title">下面
<div class="footer">应该放在<div class="container">的底部，不要与前面的内容重叠

这是当前状态：https://codepen.io/xavier-atero/pen/ExvWQww

.supercontainer {border: solid 1px black;display: flex;}
.container, .other-container {position: relative;border: solid 1px red;width: 200px;margin: 10px;}
.title {margin: 10px;border: solid 1px blue;}
.content {margin: 10px;border: solid 1px cyan;}
.footer {margin: 10px;background: lime;}

<body><div class="supercontainer"><div class="container"><div class="title">This part represents the title and it is placed on top</div><div class="content">This one represents the body and it is placed below the title</div><div class="footer">And this one is the footer. It should always be at the bottom of the container</div></div><div class="other-container"><div class="title">This part represents the title and it is placed on top.</div><div class="content">This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.</div><div class="footer">And this one is the footer. It should always be at the bottom of the container</div></div></div></body>

__________ 解决方案与FLEXBOX __________

结果如下：https://codepen.io/xavier-atero/pen/MWvpBMz

.supercontainer {border: solid 1px black;display: flex;}
.container, .other-container {position: relative;border: solid 1px red;width: 200px;margin: 10px;display: flex;flex-direction: column;}
.title {margin: 10px;border: solid 1px blue;}
.content {margin: 10px;border: solid 1px cyan;}
.footer {margin: 10px;background: lime;margin-top: auto;border: solid 1px fuchsia;}

<body><div class="supercontainer"><div class="container"><div class="title">This part represents the title and it is placed on top</div><div class="content">This one represents the body and it is placed below the title</div><div class="footer">And this one is the footer. It should always be at the bottom of the container</div></div><div class="other-container"><div class="title">This part represents the title and it is placed on top.</div><div class="content">This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.</div><div class="footer">And this one is the footer. It should always be at the bottom of the container</div></div></div></body>

__________ 解决方案与表行 __________

结果如下：https://codepen.io/xavier-atero/pen/rNzyKJm

.supercontainer {border: solid 1px black;display: flex;}
.container, .other-container {position: relative;border: solid 1px red;width: 200px;margin: 10px;border-collapse:collapse;display : table;}
.title {margin: 10px;border: solid 1px blue;}
.content {margin: 10px;border: solid 1px cyan;}
.footer {margin: 10px;background: lime;border: solid 1px fuchsia;display: table-row;vertical-align: bottom;height: 1px;}

<body><div class="supercontainer"><div class="container"><div class="title">This part represents the title and it is placed on top</div><div class="content">This one represents the body and it is placed below the title</div><div class="footer">And this one is the footer. It should always be at the bottom of the container</div></div><div class="other-container"><div class="title">This part represents the title and it is placed on top.</div><div class="content">This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.</div><div class="footer">And this one is the footer. It should always be at the bottom of the container</div></div></div></body>

小开

您可以通过将可用空间分配给顶部的内容来使用网格：

 #container {display: grid;grid-template-rows: 1fr auto;height: 10rem; /* or 100% or anything */}

<div id="container">This is random content.<div id="copyright">Copyright Foo web designs</div></div>

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

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

Flexbox方法！

使用translateY和top属性

CSS网格