Html 如何将内部 <div> 发送到其父 <div> 的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2147303/
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 send an inner <div> to the bottom of its parent <div>?
提问by uzay95
The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.
另一个div图片内的div和下面的代码。因为会有父div的文字和图片。红色 div 将是父 div 的最后一个元素。
<div style="width: 200px; height: 150px; border: 1px solid black;">
<div style="width: 100%; height: 50px; border: 1px solid red;">
</div>
</div>
回答by Jon Smock
This is one way
这是一种方式
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>
But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).
但是因为内部 div 是绝对定位的，所以你总是要担心外部 div 中的其他内容与它重叠（并且你总是必须设置固定的高度）。
If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".
如果可以，最好将内部 div 设为外部 div 中的最后一个 DOM 对象，并将其设置为“清除：两者”。
回答by Franklin Tarter
A flexbox way.
一种弹性盒方式。
HTML:
HTML：
<div class="parent">
<div>Images, text, buttons oh my!</div>
<div>Bottom</div>
</div>
CSS:
CSS：
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* not necessary, just to visualize it */
.parent {
height: 500px;
border: 1px solid black;
}
.parent div {
border: 1px solid red;
}
Edit:
编辑：
Source - Flexbox Guide
来源 - Flexbox 指南
Browser support for flexbox - Caniuse
浏览器对 flexbox 的支持 - Caniuse
回答by Fermin
Make the outer div position="relative"and the inner div position="absolute"and set it's bottom="0".
制作外部 divposition="relative"和内部 divposition="absolute"并将其设置为bottom="0".
回答by R3gi
Here is another pure CSS trick, which doesn't affect an elements flow.
这是另一个纯 CSS 技巧，它不会影响元素流。
#parent {
min-height: 100vh; /* set height as you need */
display: flex;
flex-direction: column;
background: grey;
}
.child {
margin-top: auto;
background: green;
}<div id="parent">
<h1>Positioning with margin</h1>
<div class="child">
Content to the bottom
</div>
</div>回答by Ansikt
You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element display:table;and the parent element display:table-cell;vertical-align:bottom;. After doing this, you should be able to give the the child elements display:inline-block;and they will automagically flow towards the bottom of the parent.
您可能不想要绝对定位，因为它会破坏回流：在某些情况下，更好的解决方案是制作祖父元素display:table;和父元素display:table-cell;vertical-align:bottom;。执行此操作后，您应该能够提供子元素display:inline-block;，它们将自动流向父元素的底部。
回答by Pogrindis
Note : This is by no means the best possible way to do it!
注意：这绝不是最好的方法！
Situation: I had to do the same thign only i was not able to add any extra divs, therefore i was stuck with what i had and rather than removing innerHTML and creating another via javascript almost like 2 renders i needed to have the content at the bottom (animated bar).
情况：我不得不做同样的事情，只是我无法添加任何额外的 div，因此我被困在我拥有的东西上，而不是删除 innerHTML 并通过 javascript 创建另一个几乎就像 2 个渲染一样，我需要将内容放在底部（动画条）。
Solution:Given how tired I was at the time its seems normal to even think of such a method however I knew i had a parent DOM element which the bar's height was starting from.
解决方案：考虑到我当时有多累，想到这样的方法似乎很正常，但是我知道我有一个父 DOM 元素，条的高度从该元素开始。
Rather than messing with the javascript any further i used a (NOT ALWAYS GOOD IDEA) CSS answer! :)
我没有进一步使用 javascript，而是使用了（并非总是好的想法）CSS 答案！:)
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
Yes thats correct, instead of positioning the DOM, i turned its parent upside down in css.
是的，那是正确的，而不是定位 DOM，我在 css 中颠倒了它的父级。
For my scenario it will work! Possibly for others too ! No Flame! :)
对于我的场景，它会起作用！可能也适用于其他人！没有火焰！:)
回答by formatc
Here is way to avoid absolute divs and tables if you know parent's height:
如果您知道父母的身高，这是避免绝对 div 和表格的方法：
<div class="parent">
<div class="child"> <a href="#">Home</a>
</div>
</div>
CSS:
CSS：
.parent {
line-height:80px;
border: 1px solid black;
}
.child {
line-height:normal;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
JsFiddle:
JsFiddle：
回答by ЯegDwight
<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
<div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
</div>
</div>
