将行放在容器的底部

Question

一直在努力克服这种布局，主要是试图找到一种跨浏览器并且响应迅速的解决方案。我的目标是这样的布局

基本上，我在顶部有一个120px高的菜单。这是固定的。然后我有主标题部分应该有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个孩子，第一个可以通过::before或空标签生成，并用于保存您的120px { {1}}菜单。

bootstrap-4有一些class dedicated to the flex model，你可以使用它们并只创建一个缺少你需要的那个：

测试整页的示例 （你的小提琴与bootstrap-4 beta相关联，代码片段也是如此）

＆＃13;

＆＃13;

fixed

＆＃13;

#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%;
}

＆＃13;

＆＃13;

＆＃13;