将嵌套的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

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