我不确定这是否已经被要求死刑。但我找不到向上发展的方法。
你知道内容是如何正常运行的，向下扩展，当上面的内容扩展时向下推内容。你有办法做到这一点，但向上？
现在代码的顺序如下：
H1-标题：如果它分成两行，则需要进行调整
p-Tags：如果它折成两行并向上移动H1，则需要调整高度
p-文本：与标记相同，但同时向上移动标记和标题
p-数字：增长不大，但需要坚持到角落
按钮：永远不长，需要粘在角落里
编辑1：更好的图像，黄色箭头显示内容需要增长的方式，红色显示每个部分之间的空间。
编辑二：澄清问题。
编辑3：编辑的图像，表示所有元素都粘在底部而不是顶部。
编辑4：添加了我试图避免的图像。
最佳答案
您可以使用Flexbox来实现这一点。确保容器的高度正确，然后可以使用flexbox将所有元素与底部对齐。随着内容物的增加，容器将向上填充。
在flexbox上还有一个很好的资源：CSS Tricks
--
特别是在本例中，如果您将容器设置为display: flex;和flex-direction: column;，那么它将允许您垂直对齐子元素，而不是像对浮点那样水平对齐。
将justify-content设置为flex-end将使所有内容与底部对齐。这就是魔法发生的地方。
HTML格式
<body>
<div class="container">
<h1 class="title">TITLE</h1>
<p class="tags">Tags, Things, Stuff, More Stuff</p>
<p class="text">Non via nia sex praemissae spectentur contingere respondeam.
Has scriptis usu corporis physicae. Existentia lor perspicuum sub mutationum
agnoscerem vis advertatur. Multo in entis ad rebus tactu oculi ad. Ii in
innatis viderer me hominem at ipsemet. Vitro errem im is anima famam se istas.
Mea credendas ero persuasum sanguinem vox. Sequeretur uti aut frequenter vul
commendare describere. Ex superare aeternum ob connivet ac earumque co.
Physicae fenestra obturabo ii is se.</p>
<div class="bottom">
<p>Number</p>
<p>Button</p>
</div>
</div>
</body>
CSS
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.text, .bottom {
width: 100%;
}
.container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: 100%;
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
}
关于html - 如何根据内容高度向上生长和向上移动div/p标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48711968/