全高度响应的div被h3阻塞

Question

我有几个div并排坐在一起，需要按钮在底部。

我需要按钮坐在.col-sm-4容器的底部，而不需要h3标记进一步推开它。有人有黑客或某种解决方案吗？

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

____________________Better explanation_______________

我的h3标记正在将我的.col-sm-4推到容器之外。我需要按钮在div的底部。

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

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

• 编辑- h4 -> h3.

Answer 1

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

胡闹了很久之后:之前：

<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
        <h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
        <p class="clear-margin">SOME TEXT</p>
        <div class="center-bottom">
          <a href="#" role="button" class="btn btn-activity-light btn-md"> Learn more &gt; </a>
        </div>
      </div>
    </div>

及之后：

<div class="col-sm-4 no-pad bg-white">
   <h3 class="clear-margin text-banner-activity text-center">heading</h3>
      <div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
        inner
      </div>
      <a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
        button
      </a>
    </div>

我移动了div，去掉了嵌套按钮的div，现在它起作用了，不管列的大小如何，按钮都位于底部。

Answer 2

您不能将非零高度的元素与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/

Answer 3

首先，您的标记在这两列之间有一点不同:一列在父div中有h3，另一列在前面/外部有它，这有助于使它们看起来不同。

但我建议的解决方案是在底部垫上父键，这样绝对定位按钮就一定有空间了。

看一看：https://jsfiddle.net/19obrm0q/3/