Html 从下到上堆叠 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6401869/
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
Stacking Divs from Bottom to Top
提问by Wulf
When appending divs to a divwith a fixed height, the child divs will appear from top to bottom, sticking at the top border.
将divs附加到div具有固定高度的 a 时，子 div 将从上到下出现，并停留在顶部边框处。
┌─────────────────────────┐
│ Child Div 1 │
│ Child Div 2 │
│ │
│ │
│ │
└─────────────────────────┘
I'm now trying to display them from bottom to top like this (sticking to the bottom border):
我现在试图像这样从下到上显示它们（坚持底部边框）：
┌─────────────────────────┐
│ │
│ │
│ │
│ Child Div 1 │
│ Child Div 2 │
└─────────────────────────┘
┌─────────────────────────┐
│ │
│ │
│ Child Div 1 │
│ Child Div 2 │
│ Child Div 3 │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2 │▲│
│ Child Div 3 │ │
│ Child Div 4 │ │
│ Child Div 5 │█│
│ Child Div 6 │▼│
└───────────────────────┴─┘
And so on... I hope you get what I mean.
等等......我希望你明白我的意思。
Is this simply doable with CSS (something like vertical-align: bottom)? Or do I have to hack something together with JavaScript?
这是否可以通过 CSS（类似于vertical-align: bottom）简单可行？或者我必须用 JavaScript 来破解一些东西吗？
采纳答案by gblazex
All the answers miss the scrollbarpoint of your question. And it's a tough one. If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottomand max-height. See MDNfor specific browser compatibility.
所有答案都错过了问题的滚动条点。这是一个艰难的过程。如果您只需要它在现代浏览器和 IE 8+ 上工作，您可以使用表格定位，vertical-align:bottom并且max-height. 有关特定浏览器兼容性，请参阅MDN。
Demo(vertical-align)
演示（垂直对齐）
.wrapper {
display: table-cell;
vertical-align: bottom;
height: 200px;
}
.content {
max-height: 200px;
overflow: auto;
}
html
html
<div class="wrapper">
<div class="content">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
</div>
</div>
Other than that, I think it's not possible with CSS only. You can make elements stick to the bottom of their container with position:absolute, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.
除此之外，我认为仅使用 CSS 是不可能的。您可以使用 使元素粘在容器的底部position:absolute，但这会使它们脱离流。因此，它们不会拉伸并使容器可滚动。
Demo(position-absolute)
演示（绝对位置）
.wrapper {
position: relative;
height: 200px;
}
.content {
position: absolute;
bottom: 0;
width: 100%;
}
回答by Nils Kaspersson
A more modern answer to this would be to use flexbox.
对此更现代的答案是使用flexbox.
As with many other modern features, they won't work in legacy browsers, so unless you're ready to ditch support for browsers from the IE8-9 era you will need to look for another method.
与许多其他现代功能一样，它们在旧版浏览器中不起作用，因此除非您准备放弃对 IE8-9 时代的浏览器的支持，否则您将需要寻找另一种方法。
Here's how it's done:
这是它的完成方式：
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.child {
/* whatever */
}
And that's all you need. For further reading on flexbox, see MDN.
这就是你所需要的。如需进一步阅读flexbox，请参阅MDN。
Here's an example of this with some basic styling: http://codepen.io/Mest/pen/Gnbfk
这是一个带有一些基本样式的示例：http: //codepen.io/Mest/pen/Gnbfk
回答by Mckay M
We can simply use CSS transform to archive this.
我们可以简单地使用 CSS 转换来存档。
I created a codepen for it. https://codepen.io/king-dev/pen/PoPgXEg
我为它创建了一个代码笔。 https://codepen.io/king-dev/pen/PoPgXEg
.root {
transform: scaleY(-1);
}
.root > div {
transform: scaleY(-1);
}
The idea is to flip the root first horizontally and then flip direct children divs again.
这个想法是先水平翻转根，然后再次翻转直接子 div。
回答by veganaiZe
Keepin' it oldskool...
保持它oldskool...
I wanted to do the same thing in a #headerdivso I created an empty divcalled #headspaceand placed it on the top the stack (inside of #header):
我想做同样的事情在一个#headerDIV，所以我创建了一个空的div叫#headspace，把它放在顶部的堆栈（内#header）：
<div id="header">
<div id="headspace"></div>
<div id="one">some content</div>
<div id="two">other content</div>
<div id="three">more content</div>
</div> <!-- header -->
Then I used a percentage, for the height of the invisible #headspacediv, to push the others down. It's easy to use the developer / inspector tools of the browser to get this just right.
然后我使用了一个百分比，作为不可见#headspacediv的高度，将其他人推下。使用浏览器的开发人员/检查员工具很容易做到这一点。
#header {
width: 100%;
height: 10rem;
overflow: auto;
}
#headspace {
width: 100%;
height: 42%; /* Experiment with Inspect (Element) tool */
}
#one, #two, #three {
/* Insert appropriate dimensions for others... */
}
回答by Chris
This is simple when you use position: absolute.
当您使用position: absolute.
回答by Matt Healy
<div style="height: 500px;">
<div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
<div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
<div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
<div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
<div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>
