html - 在容器底部显示行

Question

似乎卡在了本应是微不足道的任务上。我有一个像这样的 section 元素

<section id="about">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-6">
                <h2 class="section-heading">Some Header</h2>
            </div>
        </div>
        <div class="row alignBottom">
            <div class="col-xs-5 col-xs-offset-1">
                <p>Some content</p>
            </div>
            <div class="col-xs-5 col-xs-offset-1">
                <p>Some more content</p>
            </div>
        </div>
    </div>
</section>

我所做的就是让这部分成为视口(viewport)的高度

#about {
  background: #cccccc;
  min-height: 100vh;
}

现在在这个部分我有两行。第一行应该显示在顶部，所以我真的不需要对此做任何事情。第二行我需要显示在该部分的底部。为此，我本以为我需要先给容器一个 100% 的高度，但这似乎并没有改变它的高度。我可以 100% 获取容器的唯一方法是再次使用 100vh，但看到它是该部分的子项，为什么不能 100% 工作？

即使我确实使用 100vh 获得了 100%，我似乎也无法获得容器底部的行。我该怎么做呢？

我已经建立了一个例子JSFiddle

谢谢

Answer 1

您可以为此使用 display:flex。据我了解，您希望其中一行显示在该部分的顶部，而其他行显示在底部

div 要有 100% 的高度和宽度 body 也应该有 100% 的宽度和高度，相反你可以在 about 部分设置 100vh 高度，在容器上设置 100vh 高度

这是片段

#about {
  background: #cccccc;
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}
.row {
  display: flex;
  border: 1px solid green;
}
.col {
  margin-left: 15px;
}

<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-xs-offset-6">
        <h2 class="section-heading">Some Header</h2>
      </div>
    </div>
    <div class="row alignBottom">
      <div class="col col-xs-5 col-xs-offset-1">
        <p>Some content</p>
      </div>
      <div class="col col-xs-5 col-xs-offset-1">
        <p>Some more content</p>
      </div>
    </div>
  </div>
</section>

希望对你有帮助