鉴于以下HTML：
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>我想#copyright坚持到底#container。
不使用绝对定位就可以实现吗？如果float属性支持'bottom'的值，那似乎可以解决问题，但是不幸的是，事实并非如此。
如何将div放置在其容器的底部？
位置为：绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。
因此，您需要将父元素放置在相对或绝对位置等位置，并将所需元素放置在绝对位置，然后将底部设置为0。
#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>float:bottomCSS中没有任何要求。最好的方法是在以下情况下使用定位：
position:absolute;
bottom:0;
对于那些只有一个孩子的容器，您可以使用table-celland vertical-align方法，该方法可靠地将单个div放在其父对象的底部。
请注意，将其table-footer-group用作其他答案将破坏parent的高度计算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>这是一种方法，旨在使高度和宽度已知（至少近似）的元素向右浮动并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法将其轻松放置在任何其他角落。
我需要制作一个导航栏，该导航栏的右下角将有实际的链接，并包含随机的同级元素，同时确保导航栏本身可以正确拉伸，而不会破坏布局。我使用了一个“阴影”元素来占据导航栏链接的空间，并将其添加到容器的子节点的末尾。
<!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>
如果您不知道子块的高度：
#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 / margin-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>
不想在底部使用“ position：absolute”作为粘性页脚。然后，您可以这样做：
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>如果您希望它“粘”在底部，而不管容器的高度如何，那么绝对定位是可行的方法。当然，如果版权元素是容器中的最后一个元素，则无论如何它将始终位于底部。
您能否扩展您的问题？确切说明您要执行的操作（以及为什么不想使用绝对定位）？
另外，如果有使用position:absolute;或的规定position:relative;，您可以随时尝试使用padding parent div或放置margin-top:x;。在大多数情况下，这不是一个很好的方法，但在某些情况下可能会派上用场。
CSS网格
由于CSS Grid的使用在增加，因此我建议align-self网格容器中的元素。
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>使用translateY和top属性
只需将子元素元素设置为position：relative，然后将其移动到top：100％（即父元素的高度的100％），然后通过以下转换坚持到父元素的底部：translateY（-100％）（即子元素的高度的-100％孩子）。
好处
- 您不从页面流中获取元素
- 它是动态的
但仍然只是解决方法:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧版浏览器的前缀。
你可以确实align的方框bottom不使用position:absolute，如果你知道height的#container使用文本对齐的特征inline-block元素。
在这里您可以看到它的实际效果。
这是代码：
#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;
}
尽管此处提供的答案似乎都不适用于我的特定情况，但我偶然发现了提供此整洁解决方案的这篇文章：
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
我发现这对于将响应式设计应用于移动显示非常有用，而不必重新排列网站的所有html代码，body并将其自身设置为表格。
请注意，只有第一个table-footer-group或table-header-group会这样渲染：如果有多个，则其他将被渲染为table-row-group。
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>尝试这个;
<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，没有绝对定位，没有固定任何高度，跨浏览器（IE9 +）
查看工作小提琴
由于正常流程是“自上而下”的，我们不能简单地要求#copyrightdiv在没有绝对定位的情况下坚持其父辈的底部，但是如果我们希望#copyrightdiv坚持其父辈的顶部，它将会非常简单-因为这是正常的流程。
因此，我们将利用这一优势。我们将更改divHTML中s 的顺序，现在#copyrightdiv在顶部，并且内容立即跟随它。我们还使内容div一直延伸（使用伪元素和清除技术）
现在只需要在视图中反转顺序即可。使用CSS转换即可轻松完成。
我们将容器旋转180度，然后：向上-向下。（然后我们将内容取反以再次看起来正常）
如果我们希望在内容区域内有一个scroolbar，则需要多应用一些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>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>附带说明，您可能需要添加供应商前缀以提供其他支持。
实际上，@ User接受的答案仅在窗口高且内容短时才起作用。但是，如果内容很高而窗口很短，则会将版权信息放在页面内容上，然后向下滚动以查看内容将给您留下浮动的版权声明。这使得该解决方案对大多数页面（实际上是该页面）无用。
最常见的方法是演示的“ 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本来应该使我们的生活更轻松-并且总体上来说-但事实是，即使这些年来，它仍然是残破的，违反直觉的混乱。它不能解决所有问题。还不完整
表格不是很酷，但是至少就目前而言，它们有时是解决设计问题的最佳方法。
div为上述元素创建另一个容器#copyright。在版权的上方添加一个新内容div：
<div style="clear:both;"></div>
它将迫使页脚位于其他所有内容的下方，就像使用相对定位（bottom:0px;）一样。
可能不会。
分配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 of style,
position:absolute;bottom:5px;width:100%;is working, But it required more scrollup situation.