Html 如何将我的 div 定位在其容器的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/526035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I position my div at the bottom of its container?
提问by Dónal
Given the following HTML:
鉴于以下 HTML：
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>I would like #copyrightto stick to the bottom of #container.
我想#copyright坚持到底#container。
Can I achieve this without using absolute positioning? If the float property supported a value of 'bottom' it seems that would do the trick, but unfortunately, it doesn't.
我可以在不使用绝对定位的情况下实现这一目标吗？如果 float 属性支持 'bottom' 值，似乎可以解决问题，但不幸的是，事实并非如此。
回答by User
Likely not.
可能不是。
Assign position:relativeto #container, and then position:absolute; bottom:0;to #copyright.
分配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>回答by Rick Reilly
Actually, the accepted answer by @User will only work if the window is tall and the content is short. But if the content is tall and the window is short, it will put the copyright info over the page content, and then scrolling down to see the content will leave you with a floating copyright notice. That makes this solution useless for most pages (like this page, actually).
实际上，@User 接受的答案仅在窗口高且内容短的情况下才有效。但是如果内容高，窗口短，它会将版权信息放在页面内容上，然后向下滚动查看内容会给你一个浮动的版权声明。这使得这个解决方案对大多数页面（实际上就像这个页面）毫无用处。
The most common way of doing this is the "CSS sticky footer" approach demonstrated, or a slightly slimmer variation. This approach works great -- IF you have a fixed height footer.
执行此操作的最常见方法是演示的“CSS 粘性页脚”方法，或者稍微精简的变体。这种方法很有效——如果你有一个固定高度的页脚。
If you need a variable height footer that will appear at the bottom of the window if the content is too short, and at the bottom of the content if the window is too short, what do you do?
如果你需要一个高度可变的页脚，如果内容太短，它会出现在窗口底部，如果窗口太短，它会出现在内容底部，你会怎么做？
Swallow your pride and use a table.
吞下你的骄傲并使用一张桌子。
For example:
例如：
* {
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>Try it out. This will work for any window size, for any amount of content, for any size footer, on every browser... even IE6.
试试看。这适用于任何窗口大小、任何数量的内容、任何大小的页脚、每个浏览器......甚至 IE6。
If you're cringing at the thought of using a table for layout, take a second to ask yourself why. CSS was supposed to make our lives easier -- and it has, overall -- but the fact is that even after all these years, it's still a broken, counter-intuitive mess. It can't solve every problem. It's incomplete.
如果您对使用表格进行布局的想法感到畏缩，请花点时间问问自己为什么。CSS 应该让我们的生活更轻松——总的来说，它确实做到了——但事实是，即使经过这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。这是不完整的。
Tables aren't cool, but at least for now, they are sometimes the best way to solve a design problem.
表格并不酷，但至少就目前而言，它们有时是解决设计问题的最佳方式。
回答by Josh Crozier
The flexbox approach!
弹性盒方法！
In supported browsers, you can use the following:
在支持的浏览器中，您可以使用以下内容：
.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>The solution above is probably more flexible, however, here is an alternative solution:
上面的解决方案可能更灵活，但是，这里有一个替代解决方案：
.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>As a side note, you may want to add vendor prefixes for additional support.
作为旁注，您可能需要添加供应商前缀以获得额外支持。
回答by Hashbrown
Yesyou can do this without absolutepositioning and without using tables (which screw with markup and such).
是的，您可以在不absolute定位且不使用tables（带有标记等的螺丝）的情况下执行此操作。
DEMO
This is tested to work on IE>7, chrome, FF & is a really easy thing to add to your existing layout.
演示
这经过测试可以在 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;
}
It effectively does what float:bottomwould, even accounting for the issue pointed out in @Rick Reilly's answer!
它有效地做了什么float:bottom，甚至考虑到@Rick Reilly 的回答中指出的问题！
回答by avrahamcool
Its an old question, but this is a unique approach that can help in several cases.
这是一个老问题，但这是一种独特的方法，可以在多种情况下提供帮助。
Pure CSS, Without Absolute positioning, Without Fixing any Height, Cross-Browser (IE9+)
纯 CSS，无绝对定位，无固定高度，跨浏览器（IE9+）
check out that Working Fiddle
看看那个工作小提琴
Because normal flow is 'top-to-bottom' we can't simply ask the #copyrightdiv to stick to the bottom of his parent without absolutely positioning of some sort, But if we wanted the #copyrightdiv to stick to the top of his parent, it will be very simple - because this is the normal flow way.
因为正常的流程是“从上到下”的，我们不能简单地要求#copyrightdiv 在没有某种绝对定位的情况下粘在其父级的底部，但是如果我们希望#copyrightdiv 粘在其父级的顶部，它将非常简单 - 因为这是正常的流程方式。
So we will use this in our advantage.
we will change the order of the divs in the HTML, now the #copyrightdiv is at the top, and the content follow it right away.
we also make the content div stretch all the way (using pseudo elements and clearing techniques)
所以我们将利用这个优势。我们将改变divHTML 中 s的顺序，现在#copyrightdiv 在顶部，内容紧随其后。我们还使内容 div 一直拉伸（使用伪元素和清除技术）
now it's just a matter of inverting that order back in the view. that can be easily done with CSS transform.
现在只需在视图中反转该顺序即可。这可以通过 CSS 转换轻松完成。
We rotate the container by 180deg, and now: up-is-down. (and we inverse back the content to look normal again)
我们将容器旋转 180 度，现在：向上向下。（并且我们反转内容以再次看起来正常）
If we want to have a scroolbar within the content area, we need to apply a little bit more of CSS magic. as can be showed Here[in that example, the content is below a header - but its the same idea]
如果我们想在内容区域中有一个滚动条，我们需要应用更多的 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>回答by Rápli András
Create another container divfor the elements above #copyright. Just above copyright add a new div:
<div style="clear:both;"></div>It will force the footerto be under everything else, just like in the case of using relative positioning (bottom:0px;).
div为上面的元素创建另一个容器#copyright。在版权上方添加一个新的div：
<div style="clear:both;"></div>它将强制页脚位于其他所有内容下方，就像使用相对定位 ( bottom:0px;) 的情况一样。
回答by Gary Green
Try this;
尝试这个;
<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>
回答by Skippy le Grand Gourou
While none of the answers provided here seemed to apply or work in my particular case, I came across this articlewhich provides this neat solution?:
虽然这里提供的答案似乎都不适用于我的特定情况，但我发现这篇文章提供了这个巧妙的解决方案？：
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website, setting bodyitself as a table.
我发现它对于将响应式设计应用于移动显示非常有用，而无需重新排序网站的所有 html 代码，将body自身设置为表格。
Note that only the first table-footer-groupor table-header-groupwill be rendered as such?: if there are more than one, the others will be rendered as table-row-group.
请注意，只有第一个table-footer-grouportable-header-group将被渲染为这样？：如果有多个，其他将被渲染为table-row-group.
回答by Manoj Kumar
CSS Grid
CSS 网格
Since the usage of CSS Grid is increasing, I would like to suggest align-selfto the element that is inside a grid container.
由于 CSS Grid 的使用越来越多，我想建议align-self使用网格容器内的元素。
align-selfcan contain any of the values: end, self-end, flex-endfor the following example.
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>回答by Samuell
Using the translateY and top property
使用 translateY 和 top 属性
Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).
只需将元素子元素设置为 position: relative 然后将其移动到 top: 100%（这是父级的 100% 高度）并通过转换粘贴到父级的底部：translateY(-100%)（这是高度的 -100%孩子）。
BenefitS
好处
- you do nottake the element from the page flow
- it is dynamic
- 你没有从页面流中获取元素
- 它是动态的
But still just workaround :(
但仍然只是解决方法:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
Don't forget prefixes for the older browser.
不要忘记旧浏览器的前缀。
