将嵌套的 DIV 与父 DIV 的底部对齐 - 响应式 - Bootstrap3

Question

我正在寻找一种方法将嵌套的 div 与父 div 的底部对齐。

我不想使用 position:absolut:

#child {
    position: absolute;
    bottom: 0px;
}

这会破坏我的响应式设计，因为如果调整屏幕大小，内容将开始重叠。 paren 容器如下所示：

CSS

#parent {
    position: relative;
}

HTML

<header id="parent" class="container-fluid">
        <div id="overlapped-content" class="row">
            ... some regular content ...
        </div>
        <div id="child" class="row">
            <div id="lower-intro" class="container-fluid">
                ... to lower content
            </div>
        </div>
</header>

如果调整屏幕大小，overlapped-content 将与 child 内容重叠。

还有其他选择吗？

Answer 1

您可以在重叠内容上使用最小高度，也可以设置它的高度。