h3によって妨げられたフルハイト応答性のdiv

Question

私は、底にあるボタンを必要とするサイドバイサイド座っている複数のdivを持っています。
.col-sm-4コンテナの底部にボタンを置く必要があります。h3タグを押せば、それ以上押し込まれません。誰かがハックや何らかの解決策を持っていますか？

h3タグのサイズは、テキストが変更される可能性があるため、応答する必要があります。私はボックスがコンテナから押し出されるところまでそれを持っていますが、今私は立ち往生しています。

____________________Betterは私のh3タグがコンテナの私の.col-sm-4外を推進している

をexplanation_______________。私はdivの下部にあるボタンが必要です。

このjs.fiddleでは、私は2つのdivを提供しました。最初の1つはボタンが欲しい場所ですが、div2のようになるにはh3タグが必要です。ボタンをコンテナから押し出すことなく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

まず、あなたのマークアップは、2つの列の間にはほとんど差があった：一つは、親のdivの内側h3を持っていたし、他には、/外の前にそれを持っていた、彼らは異なって見える作りに貢献しました。

私の推奨する解決策は、絶対配置ボタンのための余地があるように、親の底を埋めることです。 BEFORE：くらいいじった後 https://jsfiddle.net/19obrm0q/3/

Answer 3

高さがゼロ以外の要素を同じコンテナに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/