html - 将行放在容器底部

Question

一直在为这种布局而苦苦挣扎，主要是想找到一种可以跨浏览器工作并且响应迅速的解决方案。我的目标是这样的布局

基本上，我在顶部有一个 120 像素高的菜单。这是固定的。然后我得到了主要的 header 部分，它应该有一个 min-height:100vh;。在这里面，在左边，我有一些文本应该在该部分的中间垂直对齐。然后我有一张图像应该位于该部分的底部，并且水平位于中间。

我想出了下面的结构

<header id="top-area">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="headings">
                    <h1>Some Title</h1>
                    <p>Some Text</p>
                </div>
            </div>
            <div class="col-md-4">
                <img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png">
            </div>
        </div>
    </div>
</header>

所以我让文字和图片都占了4列。这应该允许图像位于屏幕的中央。

所以，我就这样开始了 CSS

#top-area {
  min-height: 100vh;
  padding-top: 120px; //for the menu
  overflow: hidden;
  background: #ccc;
}

所以我设置了高度，给它一个填充以允许菜单，然后是一些额外的东西。我已经尝试了很多方法来让布局的其余部分就位，试图记住它需要为移动设备很好地折叠。我现在正在尝试 flex。

无论我尝试什么，似乎我实际上必须给它一个 100vh 的高度(不是最小高度)，这会导致其他设备上的东西太小，或者我需要给它一个绝对位置然后将其从文档流中取出。

我提供了一个 JSFiddle来展示我所处的位置，但目前有点困惑，因为我一直在尝试许多不同的方法。

在考虑不同浏览器和响应能力的情况下，实现此布局的最佳方式是什么？

非常感谢任何建议。

谢谢

Answer 1

使用justify-content:space-between 是个好主意，但您至少需要 2 个 child ，第一个可以通过 ::before 生成或一个空标签，用于保存 fixed 菜单的 120px。

bootstrap-4 有几个 class dedicated to the flex model ，您可以使用它们并仅创建您需要的那个:

测试整页的示例(您的 fiddle 链接到 bootstrap-4 beta，代码段也是如此)

#top-area {
  background: #ccc;
}

.mn120 {/* custom class */
  min-height: 120px;
}

.mh100vh {/* custom class */
  min-height: 100vh;
}

.headings {
  color: #fff;
  padding: 25% 0 30%;
}

#top-area .row {
  border: 1px solid green;
}

#top-area h1 {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-align: left;
  color: #ffffff;
}

#top-area p {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.2px;
  text-align: left;
  color: #ffffff;
}

#top-area img {
  display: block;
  max-width: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top-area">
  <div class="container d-flex flex-column justify-content-between fHeight mh100vh">
    <div class="mn120">
      <!-- this can be generated via a pseudo ::before to be laid ubder fixed menu -->
    </div>
    <div class="row  d-flex fHeight">
      <div class="col-md-4">
        <div class="headings">
          <h1>Some Title</h1>
          <p>Some Text</p>
        </div>
      </div>
      <div class="col-md-4">
        <img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png">
      </div>
    </div>
  </div>