Bootstrap list-group-itemsのヘッダー/フッターを作る良い方法はありますか？

Question

私は自分のカスタムヘッダー、フッターなどをリストグループ項目に追加できるようにしたいと思います。私はこれを行う簡単な方法があると確信していますが、私のCSSのスキルはサブです。誰でも私の試みを修正する良い方法を示すことができますか？ https://jsfiddle.net/r6xt1rnz/36/

私は、次のセクションにコンテンツを挿入し、それぞれがリストグループ項目の33％を占めるようにしたいと考えています。

<li class="list-group-item"> 
    <div class="list-header row"> 
     This is the header 
    </div> 
    <div class="list-content row"> 
     This is the content 
    </div> 
    <div class="list-footer row"> 
     This is the footer 
    </div> 
    </li> 

ありがとう！

Answer 1

あなたは割合に垂直高さを持っているしたい場合は、次のコードを使用する必要があります。

body, html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

この方法で、あなたは割合でheightを制御することができます。この方法は非常に推奨されず、ではなく、はブートストラップのようなフレームワークで動作します。しかし、あなたはラッパーを追加して試してみることがあります。

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
.first-top { 
 
    height: 30%; 
 
    background: #ccf; 
 
} 
 
.middle-top { 
 
    height: 40%; 
 
    background: #cfc; 
 
}

<div class="first-top"> 
 
    <!-- Give the list items here. --> 
 
</div> 
 
<div class="middle-top"></div> 
 
<div class="first-top"></div>