html - 全高响应 div 被 h3 阻挡

Question

我有几个并排放置的 div，需要将按钮放在底部。
我需要按钮位于 .col-sm-4 容器的底部，而不需要 h3 标签将它推得更远。有没有人有黑客或某种解决方案？

h3 标签大小需要响应，因为它的文本可能会改变。我已经到了箱子被推出容器的地步，但现在我被卡住了。

______________________________________ 更好的解释

我的 h3 标签将我的 .col-sm-4 推到容器外面。我需要按钮位于 div 的底部。

在这个 js.fiddle 中，我提供了两个 div。第一个是我想要按钮的地方，但我需要 h3 标签看起来像 div 2。如果没有将按钮推出容器，我似乎无法实现第二个 div。

https://jsfiddle.net/19obrm0q/1/

• 编辑 - h4 -> h3。

Answer 1

您不能将高度非零的元素与 full-height div 放在同一个容器中，并期望两者都适合父元素的 100% 高度。这就是 height: 100% 的意思。

我再次尝试，这次根据需要将 h3 保留在 col-sm-12 之外。为了完成这项工作，我将 full-height 类向上移动了一个级别到 col-sm-4。我还必须将 center-bottom 元素移到 col-sm-12 之外。这是因为现在 col-sm-4 是定义了高度的元素，它也应该是为 absolute 元素定义位置上下文的元素。

https://jsfiddle.net/19obrm0q/7/