Html 将行放在容器底部

一直在为这种布局而挣扎，主要是试图找到一种跨浏览器工作且响应速度快的解决方案。我的目标是这样的布局

基本上，我在顶部有一个120像素高的菜单。这是固定的。然后我有一个主标题部分，它应该有一个

minheight:100vh。在这一部分的左边，我有一些文本，它们应该在这一部分的中间垂直对齐。然后，我有一个图像，应该是在底部的部分，以及水平在中间。< /P>
我提出了以下结构

<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>

因此，我设置了高度，给它一个填充，以允许菜单，然后一些额外的事情。我已经尝试了很多方法来将剩余的布局放在适当的位置，试图记住它需要很好地为移动设备折叠。我现在正在尝试flex

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

我已经提供了一个例子来证明我在哪里，但现在有点混乱，因为我一直在尝试许多不同的方法

考虑到不同的浏览器和响应能力，实现这种布局的最佳方法是什么

非常感谢您的建议

谢谢
使用
调整内容是个好主意
之间的空格，但您至少需要2个子项，第一个子项可以通过
：：before
或空标记生成，并用于保存120px以用于
固定
菜单

bootstrap-4有一些功能，您可以使用它们，只创建您需要的功能：

测试整页的示例
（您的小提琴链接到bootstrap-4 beta，代码片段也链接到bootstrap-4 beta）


#顶部区域{
背景：#ccc；
}
.mn120{/*自定义类*/
最小高度：120px；
}
.mh100vh{/*自定义类*/
最小高度：100vh；
}
.标题{
颜色：#fff；
填充：25%0.30%；
}
#顶部区域，第二排{
边框：1px纯绿色；
}
#顶部区域h1{
字体大小：48px；
字体大小：粗体；
线高：1.25；
字母间距：-0.5px；
文本对齐：左对齐；
颜色：#ffffff；
}
#顶部区域p{
字体大小：24px；
字号：500；
线高：1.33；
字母间距：-0.2px；
文本对齐：左对齐；
颜色：#ffffff；
}
#顶部区域img{
显示：块；
最大宽度：50%；
}

一些头衔
一些文本

谢谢您的回复，它工作得非常好。我还有一个问题。我还有一个类似的部分。但是，最下面一行包含两个大小不同的图像。当我执行上述操作时，较小的图像位于列的顶部，而不是底部。有没有什么课太差了？Thanks@kate_hudson . 你有一个例子吗？是否有两个以上的直系子女？这里的示例使用空元素位于顶部边缘，第二个位于另一个边缘的底部。对于其他部分，您可以再次使用它：
当然，我创建了这个，这样你就可以看到较小的图像并没有放在图片的底部row@kate_hudson您可以将页边距顶部：自动添加到.col-md-4或在.row上使用对齐项目结束类
#top-area {
  min-height: 100vh;
  padding-top: 120px; //for the menu
  overflow: hidden;
  background: #ccc;
}