给出以下HTML：
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
我希望#copyright能够坚持#container的底部。
我可以不使用绝对定位来实现这一目标吗？如果float属性支持'bottom'的值，那么似乎可以做到这一点，但不幸的是，它没有。
答案 0 :(得分：841)
可能没有。
将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>
答案 1 :(得分：329)
实际上，@ 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本来应该让我们的生活变得更轻松 - 而且整体而言 - 但事实是，即使经过这么多年，它仍然是一个破碎的，反直觉的混乱。它无法解决所有问题。它不完整。
表格并不酷，但至少就目前而言，它们有时是解决设计问题的最佳方法。
答案 2 :(得分：126)
在supported browsers中，您可以使用以下内容：
.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>
作为旁注，您可能需要添加供应商前缀以获得额外支持。
答案 3 :(得分：107)
是您可以在没有absolute定位的情况下执行此操作，也可以不使用table s（使用标记等）。
DEMO
这被测试用于IE＆gt; 7，chrome，FF＆amp;添加到现有布局非常容易。
<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的回答中指出的问题！
答案 4 :(得分：20)
这是一个老问题，但这是一种独特的方法，可以在几种情况下提供帮助。
因为正常流量是“从上到下”，我们不能简单地要求#copyright div坚持他的父母的底部而没有绝对的某种定位，但如果我们想要{{1 div要坚持他父母的顶部，这将非常简单 - 因为这是正常的流程方式。
因此我们将利用这一优势。
我们将更改HTML中#copyright的顺序，现在div div位于顶部，内容会立即跟进。
我们还使内容div一直延伸（使用伪元素和清除技术）
现在只是在视图中反转该顺序的问题。这可以通过CSS转换轻松完成。
我们将容器旋转180度，现在：向上 - 向下。 （我们将内容反转回看起来正常）
如果我们想要在内容区域中有一个scroolbar，我们需要应用更多的CSS魔法。可以显示Here [在该示例中，内容低于标题 - 但它的想法相同]
#copyright* {
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);
}
答案 5 :(得分：6)
试试这个;
<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>
答案 6 :(得分：5)
为div上方的元素创建另一个容器#copyright。在版权之上添加新的div：
<div style="clear:both;"></div>
它将强制页脚置于其他所有内容之下，就像使用相对定位（bottom:0px;）一样。
答案 7 :(得分：5)
虽然这里提供的答案似乎都不适用于我的特定情况，但我遇到this article提供了这个简洁的解决方案：
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
我发现将动态显示应用于响应式设计非常有用，无需重新排序网站的所有html代码，将body本身设置为表格。
请注意，只会向第一个table-footer-group或table-header-group呈现：如果有多个，则其他人将呈现为table-row-group。
答案 8 :(得分：4)
如果您使用文字对齐了解align的{{1}}，则可以bottom使用position:absolute height方框#container inline-block元素的功能。
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;
}
答案 9 :(得分：4)
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>
答案 10 :(得分：3)
由于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>
答案 11 :(得分：3)
只需将元素子元素设置为position：relative，然后将其移动到顶部：100％（即父级的100％高度）并通过transform转换为父级的底部：translateY（-100％）（＆ ＃39; s为孩子身高的-100％。）
好处
但仍然只是解决方法:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧浏览器的前缀。
答案 12 :(得分：2)
另外，如果有使用position:absolute;或position:relative;的规定，您可以随时尝试padding 父 div或放{{1} }}。在大多数情况下，这不是一个非常好的方法，但在某些情况下可能会派上用场。
答案 13 :(得分：2)
如果你想让它“坚持”到底部，无论容器的高度如何，那么绝对定位是要走的路。当然，如果版权元素是容器中的最后一个元素，它总是在底部。
你可以扩展你的问题吗？准确解释你想要做什么（以及为什么你不想使用绝对定位）？
答案 14 :(得分：1)
如果你不知道儿童阻滞的高度：
#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
.child{background:red;vertical-align:bottom;}
</style>
</head>
<body>
<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>
答案 15 :(得分：1)
也许这有助于某人：你总是可以将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>
答案 16 :(得分：0)
具有以下位置的元素：绝对；相对于 最近定位的祖先（而不是相对于 视口，就像固定的一样。）
因此，您需要将父元素放置在相对或绝对位置等位置，并将所需元素放置在绝对位置，然后将底部设置为0。
答案 17 :(得分：0)
不要在底部的页脚使用“ 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>
答案 18 :(得分：0)
对于那些容器中只有一个孩子的人，您可以使用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>
答案 19 :(得分：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>
答案 20 :(得分：0)
这是一种方法，旨在使具有已知高度和宽度（至少近似）的元素向右浮动并保持在底部，同时表现为其他元素的内联元素。它集中在右下方，因为您可以通过其他方法将其轻松放置在任何其他角落。
我需要制作一个导航栏，它在右下方有实际的链接，以及随机的兄弟元素，同时确保栏本身正确拉伸，而不会破坏布局。我使用“shadow”元素占据导航栏的链接空间，并将其添加到容器子节点的末尾。
<!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>
答案 21 :(得分：0)
仅仅因为没有提到过，在你的情况下通常会有效：
在
你只需要以与其他容器类似的方式格式化版权div（相同的整体宽度，居中等），一切都很好。
CSS：
#container, #copyright {
width: 1000px;
margin:0 auto;
}
HTML：
<div id="container">
<!-- Other elements here -->
</div>
<div id="copyright">
Copyright Foo web designs
</div>
这可能不太理想的唯一一次是当您使用height:100%声明您的container-div时，用户需要向下滚动才能看到版权。但即使你仍然可以解决（例如margin-top:-20px - 当你的版权元素的高度为20像素时）。
除此之外：我知道OP要求提供一个解决方案“......坚持'容器'div的底部......”，而不是它下面的东西，但是来吧，人们在这里寻找好的解决方案，这就是一个！
答案 22 :(得分：0)
CSS中没有任何名为float:bottom的内容。最好的方法是在这种情况下使用定位：
position:absolute;
bottom:0;
答案 23 :(得分：-2)
风格分区position:absolute;bottom:5px;width:100%;正在运作，
但它需要更多的滚动情况。
window.onscroll = function() {
var v = document.getElementById("copyright");
v.style.position = "fixed";
v.style.bottom = "5px";
}