Question

我不确定这是否已被要求死亡。但我无法找到一种向上发展内容的方法。

您知道内容如何正常运行，向下延伸，随着上述内容的延伸推送内容。有没有办法可以做到这一点，但是向上呢？

现在代码的订购方式如下：

H1 - 标题：如果它分成两行，则需要调整 p - 标签：如果它突破到两条线并且向上移动H1，则需要调整高度 p - 文本：与标签相同，但向上移动标签和标题
p - 数字：增长不多，但需要坚持到角落 p - 按钮：永不生长，需要贴在角落上

编辑1：更好的图像，黄色箭头显示内容需要增长的方式，红色显示每个部分之间的空间。
编辑2：澄清问题。
编辑3：编辑过的图像表示所有元素都粘在底部而不是顶部编辑4：添加了我想要避免成像的内容。

Answer 1

您可以使用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;
}

Answer 2

您必须将元素放在页面底部。这是我的解决方案：

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  box-sizing: border-box;
  padding: 2rem;
  font: 1.6rem/1.4 Roboto, monospace;
}

#number,
#button {
  position: absolute;
  bottom: 2rem;
  background-color: #4caf50;
  color: #eee;
  padding: 1rem;
}

#number {
  left: 2rem;
}

#button {
  right: 2rem;
}

#topWrapper {
  position: absolute;
  bottom: 7.24rem;
  width: calc(100% - 4rem);
  max-height: calc(100vh - 9.24rem);
  overflow: auto;
}

#text,
#tags,
h1 {
  background-color: #f44336;
  color: #eee;
  padding: 1rem;
}

#tags,
#title {
  margin-bottom: 1rem;
}

#tags {
  background-color: #2196F3;
}

#title {
  background-color: #FF9800;
}

<div id="topWrapper">
  <h1 id="title">Title</h1>
  <p id="tags">Tag, Tag, Tag, Tag, Tag</p>
  <p id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<p id="number">100,000</p>
<p id="button">Button</p>

您还可以在title is longer小提琴中查看它。此外，请查看tag list is longer或N3i1时的行为方式。如果内容变得太多，则添加垂直滚动条。

Answer 3

您可以使用flex布局实现此目的，这是一个示例：

内容很少

＆＃13;

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

h1 {
  margin-top: auto;
}

＆＃13;

<h1>A title</h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum L</p>
<div>
  <button>i am a button</button>
  <button style="float:right">i am another button</button>
</div>

＆＃13;

很多内容

＆＃13;

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

h1 {
  margin-top: auto;
}

＆＃13;

<h1>A title</h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum um Lorem ipsumum Lorem ipsum</h3>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum m ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
  ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum orem ipsum Lorem
  ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<div>
  <button>i am a button</button>
  <button style="float:right">i am another button</button>
</div>

＆＃13;

如何根据内容高度增长和移动div / p标签

3 个答案: