親コンテナの背景に同じサイズのテキストを均等に塗りつぶす

Question

列内の各グリッド項目に対して異なる長さのテキストに均等に高さを記入するには、コンテナの背景をどのように取得できますか？

SCSS：

.use-case-block-container{ 
    margin: 15px; 
} 
.use-case-block{ 
    margin: 15px; 
    display: block; 
    text-align: center; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background: rgba(0,0,0,0.32); 
} 

HTML

<div class="row"> 
     <hr> 
     <h2>Use Cases</h2> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     <div class="row"> 
     <div class="col-md-12"> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">CUSTOMER EXPOSURE</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">CUSTOMER ACTIVITY HISTORY</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">CUSTOMER DATA GOVERNANCE</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">DATA LINEAGE</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">AUTOMATED ACCESS OF UNSTRUCTURED DATA</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">REGULATORY COMPLIANCE – SIFI</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">REGULATORY COMPLIANCE – CCAR</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">REGULATORY COMPLIANCE – POST TRADE COMMUNICATIONS</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">PII DATA IDENTIFICATION AND LOCATION</a> 
        </div> 
       </div> 
       </div> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">COMPREHENSIVE DATA REPAIR</a> 
        </div> 
       </div> 
       </div> 
     </div> 
     </div> 
     </div> 
    </div> 

結果：

問題は、アイテムの各行がそれぞれの側で同じブロックのパディングを有していなければならないということです。たとえば、項目の1つに2の代わりに3行がある場合、各ブロックは2または1の代わりに3行の高さに調整する必要があります。この方法では、すべてのコンテナが同じサイズで応答性があります。

Answer 1

あなたはいつでもjsにそれらをループすることができます。最大のものを見つけてその高さを他のすべてのものに割り当てることができます。

しかし、私は、cssにいくつかの妥当な値を設定するほうが簡単だと思います。min-heightあなたは、あなたがフレキシボックス等しいコラムの高さを使用することができますJSを使用したい場合は `tを

Answer 2

：

列コンテナは、次のようになります。

表示：フレックス;

フレックスボックス同等の高さのためにすばやいseachを行います。

Answer 3

.use-case-block-containerのすべてに適切な固定高さを設定し、テキスト照会のブレークポイントを使用して、テキストの高さが変更されたときに固定高さを調整する必要があります。

各.use-case-block-containerは、テキストの縦と横のセンタリングのためにdisplay: flex; align-items: center; justify-content: center;を持つこともできます。